chore(graph): add graph generator (#13003)

.gitignore

@@ -14,6 +14,8 @@ jest.debug.config.js
 /.nx-cache
 /.verdaccio/build/local-registry
 /graph/client/src/assets/environment.js
+/graph/client/src/assets/dev/environment.js
+/graph/client/src/assets/generated-graphs
 /nx-dev/nx-dev/public/documentation
 /nx-dev/nx-dev/public/images/open-graph
 # Lerna creates this

graph/client-e2e/project.json

@@ -12,22 +12,22 @@
       "configurations": {
         "dev": {
           "cypressConfig": "graph/client-e2e/cypress.config.ts",
-          "devServerTarget": "graph-client:serve",
+          "devServerTarget": "graph-client:serve-base:dev-e2e",
-          "baseUrl": "http://localhost:4201"
+          "baseUrl": "http://localhost:4206"
         },
         "watch": {
           "cypressConfig": "graph/client-e2e/cypress-watch-mode.config.ts",
-          "devServerTarget": "graph-client:serve:watch",
+          "devServerTarget": "graph-client:serve-base:watch",
           "baseUrl": "http://localhost:4204"
         },
         "release": {
           "cypressConfig": "graph/client-e2e/cypress-release.config.ts",
-          "devServerTarget": "graph-client:serve:release",
+          "devServerTarget": "graph-client:serve-base:release",
           "baseUrl": "http://localhost:4203"
         },
         "release-static": {
           "cypressConfig": "graph/client-e2e/cypress-release-static.config.ts",
-          "devServerTarget": "graph-client:serve:release-static",
+          "devServerTarget": "graph-client:serve-base:release-static",
           "baseUrl": "http://localhost:4205"
         }
       },
@@ -38,10 +38,10 @@
       "outputs": [],
       "options": {
         "commands": [
-          "npx nx e2e-base e2e-graph-client -c dev",
+          "npx nx e2e-base e2e-graph-client --configuration dev",
-          "npx nx e2e-base e2e-graph-client -c watch",
+          "npx nx e2e-base e2e-graph-client --configuration watch",
-          "npx nx e2e-base e2e-graph-client -c release",
+          "npx nx e2e-base e2e-graph-client --configuration release",
-          "npx nx e2e-base e2e-graph-client -c release-static"
+          "npx nx e2e-base e2e-graph-client --configuration release-static"
         ],
         "parallel": false
       }

graph/client-e2e/src/e2e/app.cy.ts

@@ -23,7 +23,7 @@ import * as nxExamplesJson from '../fixtures/nx-examples.json';
 
 describe('graph-client', () => {
   before(() => {
-    cy.intercept('/assets/graphs/nx.json', { fixture: 'nx-examples.json' }).as(
+    cy.intercept('/assets/graphs/e2e.json', { fixture: 'nx-examples.json' }).as(
       'getGraph'
     );
     cy.visit('/');
@@ -144,7 +144,7 @@ describe('graph-client', () => {
         fixture: 'affected.json',
       }).as('getAffectedGraph');
 
-      cy.get('[data-cy=project-select]').select('Affected', { force: true });
+      cy.get('[data-cy=project-select]').select('affected', { force: true });
 
       cy.wait('@getAffectedGraph');
       getSelectAffectedButton().click();
@@ -155,10 +155,10 @@ describe('graph-client', () => {
       );
 
       // switch back to Nx Examples graph before proceeding
-      cy.intercept('/assets/graphs/nx-examples.json', {
+      cy.intercept('/assets/graphs/e2e.json', {
         fixture: 'nx-examples.json',
       }).as('getGraph');
-      cy.get('[data-cy=project-select]').select('Nx Examples', { force: true });
+      cy.get('[data-cy=project-select]').select('e2e', { force: true });
       cy.wait('@getGraph');
     });
   });

graph/client/project.json

@@ -3,6 +3,32 @@
   "sourceRoot": "graph/client/src",
   "projectType": "application",
   "targets": {
+    "generate-dev-environment-js": {
+      "executor": "nx:run-commands",
+      "options": {
+        "commands": [
+          "ts-node -P ./scripts/tsconfig.scripts.json ./scripts/generate-graph-environment.ts"
+        ]
+      }
+    },
+    "generate-graph-base": {
+      "executor": "nx:run-commands",
+      "options": {
+        "commands": [
+          "ts-node -P ./scripts/tsconfig.scripts.json ./scripts/generate-graph.ts"
+        ]
+      }
+    },
+    "generate-graph": {
+      "executor": "nx:run-commands",
+      "options": {
+        "commands": [
+          "npx nx run graph-client:generate-graph-base",
+          "npx nx run graph-client:generate-dev-environment-js"
+        ],
+        "parallel": false
+      }
+    },
     "build-base": {
       "executor": "@nrwl/webpack:webpack",
       "options": {
@@ -36,6 +62,7 @@
           "assets": [
             "graph/client/src/favicon.ico",
             "graph/client/src/assets/graphs/",
+            "graph/client/src/assets/generated-graphs/",
             {
               "input": "graph/client/src/assets/dev",
               "output": "/",
@@ -43,13 +70,24 @@
             }
           ]
         },
+        "dev-e2e": {
+          "assets": [
+            "graph/client/src/favicon.ico",
+            "graph/client/src/assets/graphs/",
+            {
+              "input": "graph/client/src/assets/dev-e2e",
+              "output": "/",
+              "glob": "environment.js"
+            }
+          ]
+        },
         "nx-console": {
           "assets": [
             "graph/client/src/favicon.ico",
             {
               "input": "graph/client/src/assets/graphs",
               "output": "/assets/graphs",
-              "glob": "nx-examples.json"
+              "glob": "e2e.json"
             },
             {
               "input": "graph/client/src/assets/nx-console",
@@ -64,7 +102,7 @@
             {
               "input": "graph/client/src/assets/graphs",
               "output": "/assets/graphs",
-              "glob": "nx-examples.json"
+              "glob": "e2e.json"
             },
             {
               "input": "graph/client/src/assets/release",
@@ -92,7 +130,7 @@
             {
               "input": "graph/client/src/assets/graphs",
               "output": "/assets/graphs",
-              "glob": "nx-examples.json"
+              "glob": "e2e.json"
             },
             {
               "input": "graph/client/src/assets/release-static",
@@ -128,7 +166,7 @@
       "defaultConfiguration": "release",
       "outputs": ["{options.outputPath}"]
     },
-    "serve": {
+    "serve-base": {
       "executor": "@nrwl/webpack:dev-server",
       "configurations": {
         "dev": {
@@ -150,6 +188,39 @@
         "release-static": {
           "buildTarget": "graph-client:build-base:release-static",
           "port": 4205
+        },
+        "dev-e2e": {
+          "buildTarget": "graph-client:build-base:dev-e2e",
+          "port": 4206
+        }
+      },
+      "defaultConfiguration": "dev"
+    },
+    "serve": {
+      "executor": "nx:run-commands",
+      "configurations": {
+        "dev": {
+          "commands": [
+            "npx nx run graph-client:generate-dev-environment-js",
+            "npx nx serve-base graph-client"
+          ],
+          "parallel": false
+        },
+        "release": {
+          "commands": ["npx nx serve-base graph-client --configuration release"]
+        },
+        "release-static": {
+          "commands": [
+            "npx nx serve-base graph-client --configuration release-static"
+          ]
+        },
+        "watch": {
+          "commands": ["npx nx serve-base graph-client --configuration watch"]
+        },
+        "nx-console": {
+          "commands": [
+            "npx nx serve-base graph-client --configuration nx-console"
+          ]
         }
       },
       "defaultConfiguration": "dev"

graph/client/src/assets/dev-e2e/environment.js

@@ -0,0 +1,22 @@
+window.exclude = [];
+window.watch = false;
+window.environment = 'dev';
+window.useXstateInspect = false;
+
+window.appConfig = {
+  showDebugger: true,
+  showExperimentalFeatures: true,
+  projectGraphs: [
+    {
+      id: 'e2e',
+      label: 'e2e',
+      url: 'assets/graphs/e2e.json',
+    },
+    {
+      id: 'affected',
+      label: 'affected',
+      url: 'assets/graphs/affected.json',
+    },
+  ],
+  defaultProjectGraph: 'e2e',
+};

graph/client/src/assets/dev/environment.js

@@ -1,57 +0,0 @@
-window.exclude = [];
-window.watch = false;
-window.environment = 'dev';
-window.useXstateInspect = false;
-
-window.appConfig = {
-  showDebugger: true,
-  showExperimentalFeatures: true,
-  projectGraphs: [
-    {
-      id: 'nx',
-      label: 'Nx',
-      url: 'assets/graphs/nx.json',
-    },
-    {
-      id: 'ocean',
-      label: 'Ocean',
-      url: 'assets/graphs/ocean.json',
-    },
-    {
-      id: 'nx-examples',
-      label: 'Nx Examples',
-      url: 'assets/graphs/nx-examples.json',
-    },
-    {
-      id: 'sub-apps',
-      label: 'Sub Apps',
-      url: 'assets/graphs/sub-apps.json',
-    },
-    {
-      id: 'storybook',
-      label: 'Storybook',
-      url: 'assets/graphs/storybook.json',
-    },
-    {
-      id: 'focus-testing',
-      label: 'Focus',
-      url: 'assets/graphs/focus-testing.json',
-    },
-    {
-      id: 'affected',
-      label: 'Affected',
-      url: 'assets/graphs/affected.json',
-    },
-    {
-      id: 'collapsing-edges-testing',
-      label: 'Collapsing Edges',
-      url: 'assets/graphs/collapsing-edges-testing.json',
-    },
-    {
-      id: 'nested-workspace-layout',
-      label: 'Nested Workspace Layout',
-      url: 'assets/graphs/nested-workspace-layout.json',
-    },
-  ],
-  defaultProjectGraph: 'nx',
-};

graph/client/src/assets/graphs/e2e.json

@@ -1,5 +1,5 @@
 {
-  "hash": "bd93a0dd65a777ebb28146f82c2f5c1ee40edf9e44c9e8f8f18c55a1464988c0",
+  "hash": "f04e623f47ff05af4d6a6b50f489da2d497e8c37baf8a31f06c54acc21e6195f",
   "projects": [
     {
       "name": "products-product-detail-page",
@@ -13,12 +13,12 @@
             "hash": "27519506e3b1095fc3d2395d0bc6163409573e27"
           },
           {
-            "file": "libs/products/product-detail-page/jest.config.js",
+            "file": "libs/products/product-detail-page/jest.config.ts",
-            "hash": "ded1479a6a329c3d6118d88d2dc7978b8e9824a2"
+            "hash": "fbdaa40eee040e39d70fb462e5940cdeddb440c1"
           },
           {
             "file": "libs/products/product-detail-page/project.json",
-            "hash": "0c9022339c45bb9a91c24e0da3329a03c8972616"
+            "hash": "afaf79c79d5914d6f3a73e9406295d1df0709334"
           },
           {
             "file": "libs/products/product-detail-page/README.md",
@@ -38,7 +38,7 @@
           },
           {
             "file": "libs/products/product-detail-page/src/lib/product-detail-page/product-detail-page.component.spec.ts",
-            "hash": "e8390b7218d2dca9eb4be8d2b1cc08e1b1c0de1b",
+            "hash": "0de2f97bbb2d8d9877b20f2a4024a3409021c652",
             "deps": [
               "npm:@angular/core",
               "npm:@angular/router",
@@ -61,12 +61,12 @@
           },
           {
             "file": "libs/products/product-detail-page/src/lib/products-product-detail-page.module.spec.ts",
-            "hash": "01541f218a3a1b95b056fd9d2d1b578e5a2e3d9a",
+            "hash": "42049a1b8ea89bdc9bbad4be1fbb299d716bc327",
             "deps": ["npm:@angular/core"]
           },
           {
             "file": "libs/products/product-detail-page/src/lib/products-product-detail-page.module.ts",
-            "hash": "5c06b527e7ffe870f1960a74a845106beca79b6b",
+            "hash": "3d77c3b1e639077f830ead6241e615da7f4fdf53",
             "deps": [
               "npm:@angular/common",
               "npm:@angular/core",
@@ -81,15 +81,15 @@
           },
           {
             "file": "libs/products/product-detail-page/tsconfig.json",
-            "hash": "1b6ee0bf6f3df276fbfc5c683aca2e02c6c6523a"
+            "hash": "5602461b1ed724ed65200be5367ab1defdc871fc"
           },
           {
             "file": "libs/products/product-detail-page/tsconfig.lib.json",
-            "hash": "a86e8be7a68f3cc03c74c5a09390b33e2f776702"
+            "hash": "570fd66cb7ce59508cddedca0ef815a1c635315d"
           },
           {
             "file": "libs/products/product-detail-page/tsconfig.spec.json",
-            "hash": "1f8e7f6c3e5a63e2af398d49fef36e6f6659fb7c"
+            "hash": "34c38b0ec3a38a7cbd5c3e378ff421ad31e84efb"
           }
         ]
       }
@@ -110,12 +110,12 @@
             "hash": "eee5f453593a2b8e7f865305029b7edc3449cca6"
           },
           {
-            "file": "libs/shared/product/state/jest.config.js",
+            "file": "libs/shared/product/state/jest.config.ts",
-            "hash": "5a309f7bc9c2aba47951f68dfd2dc74701537484"
+            "hash": "9184d1913ec49fa254d1ebdcffd99d31d07b5353"
           },
           {
             "file": "libs/shared/product/state/project.json",
-            "hash": "c0b3a895e001a77b6e39df10c105551f2a9d1ba1"
+            "hash": "851c8ba6632d38e2ccde4b4cf6e0b12b8e3f66f1"
           },
           {
             "file": "libs/shared/product/state/README.md",
@@ -143,7 +143,7 @@
           },
           {
             "file": "libs/shared/product/state/src/lib/+state/products.selectors.spec.ts",
-            "hash": "25cd673e1ff8b591f92f734944cd20adf965b612",
+            "hash": "d22772ca82cb0f57a96d11fa3cb8f5a0e238c6d8",
             "deps": ["shared-product-data"]
           },
           {
@@ -152,12 +152,12 @@
           },
           {
             "file": "libs/shared/product/state/src/lib/shared-product-state.module.spec.ts",
-            "hash": "713543b7a36b2027985904f9a74124f79406108c",
+            "hash": "2aab0223be6028d16f8cddc8ac033b362eae21e2",
             "deps": ["npm:@angular/core"]
           },
           {
             "file": "libs/shared/product/state/src/lib/shared-product-state.module.ts",
-            "hash": "144207d2b4609204b8ceab1ae81d1079d61b3949",
+            "hash": "45820bfa99997f35e6576d526fa228b7a5638cca",
             "deps": [
               "npm:@angular/common",
               "npm:@angular/core",
@@ -175,15 +175,15 @@
           },
           {
             "file": "libs/shared/product/state/tsconfig.json",
-            "hash": "d32f55e3999447ae24e89f0e76d8c3128113c85e"
+            "hash": "a9a0b978b3edf84247a550ba82d8eea50dc8da68"
           },
           {
             "file": "libs/shared/product/state/tsconfig.lib.json",
-            "hash": "6d8381892432362a9efb491476651c6b8cc2d1a2"
+            "hash": "3b1fbbb954624d075826446e0060d243813ebcf1"
           },
           {
             "file": "libs/shared/product/state/tsconfig.spec.json",
-            "hash": "6089636545924f32531e4bd15d9d031aa84f63e0"
+            "hash": "8603a008c3b77e77e142939e83e05e4a1043fbc6"
           }
         ]
       }
@@ -205,7 +205,7 @@
           },
           {
             "file": "libs/shared/product/types/project.json",
-            "hash": "c4d630da19998c6664c793aa9e1da2afb1520dc5"
+            "hash": "92202a2aaf4c482dd8e463ddefc6d0eb6f5640f2"
           },
           {
             "file": "libs/shared/product/types/README.md",
@@ -247,7 +247,7 @@
           },
           {
             "file": "libs/shared/product/data/project.json",
-            "hash": "6cb1a1f6762f3e891398ec2df3036f74b138db2e"
+            "hash": "8c12bcd46a2d49861cd71b6b9502bf5a408c380d"
           },
           {
             "file": "libs/shared/product/data/README.md",
@@ -259,11 +259,11 @@
           },
           {
             "file": "libs/shared/product/data/src/lib/product-data.mock.ts",
-            "hash": "dcd7b7730bcd977d83eec2b8c8a27980ed605d58"
+            "hash": "dedcafc80a6cf40d3f644c8f88679b0182fd1c00"
           },
           {
             "file": "libs/shared/product/data/src/lib/shared-product-data.ts",
-            "hash": "eea248a1d99f1b5385f489a9ff7cbe8d947dd5aa",
+            "hash": "37d51e532586fe98ac35c9236e8fd538718cf14f",
             "deps": ["shared-product-types"]
           },
           {
@@ -293,12 +293,12 @@
             "hash": "9384bd8cee7cccbdde43abbc051ecf6cef35b256"
           },
           {
-            "file": "libs/products/home-page/jest.config.js",
+            "file": "libs/products/home-page/jest.config.ts",
-            "hash": "6de15e0e0f1e3de70757fbac71d98c25cd9bfbed"
+            "hash": "811538b0e4b2bddada064484783eb1d3e8a9b947"
           },
           {
             "file": "libs/products/home-page/project.json",
-            "hash": "157f0e2f3e24ef1397362f0704c1b8849361767a"
+            "hash": "49e94220da64777b26d6e9c64f3b8b5b54d9dd69"
           },
           {
             "file": "libs/products/home-page/README.md",
@@ -318,7 +318,7 @@
           },
           {
             "file": "libs/products/home-page/src/lib/home-page/home-page.component.spec.ts",
-            "hash": "66eb455b3e71b30c0bd16a4769cc34b81133b667",
+            "hash": "87d1216af1f7737913862e6ddeaadebad62791e5",
             "deps": [
               "npm:@angular/core",
               "npm:@angular/router",
@@ -340,12 +340,12 @@
           },
           {
             "file": "libs/products/home-page/src/lib/products-home-page.module.spec.ts",
-            "hash": "1d9cf1c8c46ebe69275def67ccf6f04c0f967856",
+            "hash": "8cb2bfc9f5de5af9800855b4945b103d115b14ba",
             "deps": ["npm:@angular/core"]
           },
           {
             "file": "libs/products/home-page/src/lib/products-home-page.module.ts",
-            "hash": "db6a06b6d0063c4a1fff6c7953be09a680592184",
+            "hash": "7f4fdd952cc9cf060895ac58572039cde80237e3",
             "deps": [
               "npm:@angular/common",
               "npm:@angular/core",
@@ -360,15 +360,15 @@
           },
           {
             "file": "libs/products/home-page/tsconfig.json",
-            "hash": "1b6ee0bf6f3df276fbfc5c683aca2e02c6c6523a"
+            "hash": "5602461b1ed724ed65200be5367ab1defdc871fc"
           },
           {
             "file": "libs/products/home-page/tsconfig.lib.json",
-            "hash": "a86e8be7a68f3cc03c74c5a09390b33e2f776702"
+            "hash": "570fd66cb7ce59508cddedca0ef815a1c635315d"
           },
           {
             "file": "libs/products/home-page/tsconfig.spec.json",
-            "hash": "1f8e7f6c3e5a63e2af398d49fef36e6f6659fb7c"
+            "hash": "34c38b0ec3a38a7cbd5c3e378ff421ad31e84efb"
           }
         ]
       }
@@ -389,12 +389,12 @@
             "hash": "57932578e6df8f4a907a78abde0e3f5a7d84fc6f"
           },
           {
-            "file": "libs/shared/cart/state/jest.config.js",
+            "file": "libs/shared/cart/state/jest.config.ts",
-            "hash": "fd7e6f4c5d6aeaac4776a793432321ffd7c867a1"
+            "hash": "8357457b34280e715a5f5832b115ab6bf2681c31"
           },
           {
             "file": "libs/shared/cart/state/project.json",
-            "hash": "f27bfc806b976a518617eb9062b55be2e8226f9a"
+            "hash": "a8448393b26be761ecf79cc38746d5aafc18a27f"
           },
           {
             "file": "libs/shared/cart/state/README.md",
@@ -419,7 +419,7 @@
           },
           {
             "file": "libs/shared/cart/state/src/lib/+state/cart.selectors.spec.ts",
-            "hash": "dc5a869677b1db84446492fc6a1045cd33c0d661",
+            "hash": "77cc9170d1302e0a84409885d81c3c59fd1226a6",
             "deps": ["shared-product-data", "shared-product-state"]
           },
           {
@@ -429,12 +429,12 @@
           },
           {
             "file": "libs/shared/cart/state/src/lib/shared-cart-state.module.spec.ts",
-            "hash": "caef812f0d76e3f3ca6849d53dc0d011cd2e902a",
+            "hash": "e4e845c3c52dc39e06358bf83a729827fe652da5",
             "deps": ["npm:@angular/core"]
           },
           {
             "file": "libs/shared/cart/state/src/lib/shared-cart-state.module.ts",
-            "hash": "180d2c45ab25f0eeb6b15378bd43b85874f5b318",
+            "hash": "f4b3a218c98c9aa7c0eb5828b5085826d174144a",
             "deps": [
               "npm:@angular/common",
               "npm:@angular/core",
@@ -452,15 +452,15 @@
           },
           {
             "file": "libs/shared/cart/state/tsconfig.json",
-            "hash": "d32f55e3999447ae24e89f0e76d8c3128113c85e"
+            "hash": "a9a0b978b3edf84247a550ba82d8eea50dc8da68"
           },
           {
             "file": "libs/shared/cart/state/tsconfig.lib.json",
-            "hash": "6d8381892432362a9efb491476651c6b8cc2d1a2"
+            "hash": "3b1fbbb954624d075826446e0060d243813ebcf1"
           },
           {
             "file": "libs/shared/cart/state/tsconfig.spec.json",
-            "hash": "6089636545924f32531e4bd15d9d031aa84f63e0"
+            "hash": "8603a008c3b77e77e142939e83e05e4a1043fbc6"
           }
         ]
       }
@@ -481,12 +481,12 @@
             "hash": "f27e8c332d321de90c56395d24b45a2b68d1b52b"
           },
           {
-            "file": "libs/shared/product/ui/jest.config.js",
+            "file": "libs/shared/product/ui/jest.config.ts",
-            "hash": "d032303d104ce2fe92d12893c1c149e4f9fb4b45"
+            "hash": "262c1e746be37cbce13b006e6add33401b105a3e"
           },
           {
             "file": "libs/shared/product/ui/project.json",
-            "hash": "70dee7ca7a82443e9b4b32a403cd558884f38fd8"
+            "hash": "07eafbdc2162159856a6bad608469356c0574278"
           },
           {
             "file": "libs/shared/product/ui/README.md",
@@ -502,7 +502,7 @@
           },
           {
             "file": "libs/shared/product/ui/src/lib/product-price/product-price.element.ts",
-            "hash": "8c626d1213b1b47bc2bdf221554fb38bb9f9bfae",
+            "hash": "a6d8f7b3db8bab4c3afd48786c09ce2c9b4656b5",
             "deps": ["shared-jsxify"]
           },
           {
@@ -516,11 +516,11 @@
           },
           {
             "file": "libs/shared/product/ui/tsconfig.lib.json",
-            "hash": "bb348accf6ee25f0e83651f3058a2f7bc23e9be1"
+            "hash": "7c7688b3df9330c9e0768df1c4701e55add00a40"
           },
           {
             "file": "libs/shared/product/ui/tsconfig.spec.json",
-            "hash": "1f4ea6984a42a3e2396a474de39621dfdf02175c"
+            "hash": "515fdb6e5dd4291dc308b7aee7a45b72c83a1b1d"
           }
         ]
       }
@@ -538,7 +538,7 @@
           },
           {
             "file": "libs/shared/e2e-utils/project.json",
-            "hash": "783ead0bf5e68083a9dbf390fa49bbd97ff7fa1a"
+            "hash": "244fa3bf318d2b113e9a6b97b8988c5d661b0e38"
           },
           {
             "file": "libs/shared/e2e-utils/README.md",
@@ -579,12 +579,12 @@
             "hash": "0790d98fc5188ef5b9707e0a47792b30e87f807f"
           },
           {
-            "file": "libs/cart/cart-page/jest.config.js",
+            "file": "libs/cart/cart-page/jest.config.ts",
-            "hash": "f526b301f8754df11afe4e46f4ed1357f6a06ec7"
+            "hash": "cfd45fc556295c42c6b09f864a82309d649e452f"
           },
           {
             "file": "libs/cart/cart-page/project.json",
-            "hash": "1cc1eccfd227af5c75288e67528d76743d0efd5d"
+            "hash": "50c94308d4188fedde398bb342ca3b89f6e8b851"
           },
           {
             "file": "libs/cart/cart-page/README.md",
@@ -621,11 +621,11 @@
           },
           {
             "file": "libs/cart/cart-page/tsconfig.lib.json",
-            "hash": "c6a0c23566ca982df78d0ee961e1cf1674793118"
+            "hash": "8dcf07ce29e8bca717ce2672fb9f2ac5c9ab0556"
           },
           {
             "file": "libs/cart/cart-page/tsconfig.spec.json",
-            "hash": "cab0321d30317cad540f0f087e2c2caf670370fe"
+            "hash": "e1535ba9d07c38511f465f5427c9c5a39ab3b174"
           }
         ]
       }
@@ -639,7 +639,7 @@
         "files": [
           {
             "file": "libs/shared/assets/project.json",
-            "hash": "ed3a5761da20b48280dc7e572c888093d13cf37a"
+            "hash": "4fb68b4528e6326aebe04647bc437f7477a94e5c"
           },
           {
             "file": "libs/shared/assets/README.md",
@@ -696,12 +696,12 @@
             "hash": "09fd44fea0cd18509c0e77aa5522c65590df0448"
           },
           {
-            "file": "libs/shared/header/jest.config.js",
+            "file": "libs/shared/header/jest.config.ts",
-            "hash": "563ed547b97bd2f478059633b6cd63d5cf7e570c"
+            "hash": "77a96b3c6ffd4f4b946c1a8558bf2187a03c958e"
           },
           {
             "file": "libs/shared/header/project.json",
-            "hash": "ca88f6b6dbea994232e6b79861fffcbe0e0e9290"
+            "hash": "725e63d4be61a51b77fb25000400e6ea6c7ce139"
           },
           {
             "file": "libs/shared/header/README.md",
@@ -721,7 +721,7 @@
           },
           {
             "file": "libs/shared/header/src/lib/header/header.element.ts",
-            "hash": "788a1512fb3b61bb9d431c16656781132ac5c530",
+            "hash": "5123c6b355b86e8872afb0c65a1745c9c70d40b0",
             "deps": ["shared-jsxify"]
           },
           {
@@ -735,11 +735,11 @@
           },
           {
             "file": "libs/shared/header/tsconfig.lib.json",
-            "hash": "93dd59b93ff9d0289ecfb437bc1a73c18d3ecb36"
+            "hash": "20057947e016b3c54734e67901bb1663770adee7"
           },
           {
             "file": "libs/shared/header/tsconfig.spec.json",
-            "hash": "cab0321d30317cad540f0f087e2c2caf670370fe"
+            "hash": "e1535ba9d07c38511f465f5427c9c5a39ab3b174"
           }
         ]
       }
@@ -761,7 +761,7 @@
           },
           {
             "file": "libs/shared/jsxify/project.json",
-            "hash": "3dd4e5f2811d3377248f9c0dae8eba489391fa7e"
+            "hash": "01db4dd77ff7eb12a1af62d040df77ebb54a4bf0"
           },
           {
             "file": "libs/shared/jsxify/README.md",
@@ -795,7 +795,7 @@
         "files": [
           {
             "file": "libs/shared/styles/project.json",
-            "hash": "b5a6f584bc941709d29e6adc4d5ca56ce30ae01c"
+            "hash": "47566a51c14545b7fa381bbfddd4e36217c80c69"
           },
           {
             "file": "libs/shared/styles/README.md",
@@ -824,22 +824,23 @@
             "hash": "e7caab63fbef52bb000835acbb23935cb48203a0"
           },
           {
-            "file": "apps/products-e2e/cypress.json",
+            "file": "apps/products-e2e/cypress.config.ts",
-            "hash": "ee5af7e5518edbfda16020d5b0b543542438788c"
+            "hash": "c80242149987121c164a3e239abe178abc8d4a07",
+            "deps": ["npm:cypress", "npm:@nrwl/cypress"]
           },
           {
             "file": "apps/products-e2e/project.json",
-            "hash": "a6433cd42925d342ece35e788c3f2d43263a26e6"
+            "hash": "957ee425995fa9c2ba8158c112ee2a4cd96b7b84"
+          },
+          {
+            "file": "apps/products-e2e/src/e2e/app.cy.ts",
+            "hash": "b83b44ff82a9b4afd01aff30386219a8779c80d8",
+            "deps": ["shared-e2e-utils"]
           },
           {
             "file": "apps/products-e2e/src/fixtures/example.json",
             "hash": "294cbed6ce9e0b948b787452e8676aee486cb3be"
           },
-          {
-            "file": "apps/products-e2e/src/integration/app.spec.ts",
-            "hash": "00b7341abcfcdaf897c7eb31f6a79a297fc01af0",
-            "deps": ["shared-e2e-utils"]
-          },
           {
             "file": "apps/products-e2e/src/support/app.po.ts",
             "hash": "d5ac94199b3e68be5782c883344f00c90bfd07a9"
@@ -849,12 +850,12 @@
             "hash": "ca4d256f3eb15dfabad1f5760c9b2d0ceb4c24b9"
           },
           {
-            "file": "apps/products-e2e/src/support/index.ts",
+            "file": "apps/products-e2e/src/support/e2e.ts",
             "hash": "3d469a6b6cf31eb66117d73e278bcf74f398f1db"
           },
           {
             "file": "apps/products-e2e/tsconfig.json",
-            "hash": "c4f818ecd40fbce82c3e08bf25cde3043970f8f3"
+            "hash": "cc509a730e12498509bb7475f6f54b1a18021191"
           }
         ]
       }
@@ -871,22 +872,23 @@
             "hash": "082395fbd03ae178157f9ebd4d374d208fd254f8"
           },
           {
-            "file": "apps/cart-e2e/cypress.json",
+            "file": "apps/cart-e2e/cypress.config.ts",
-            "hash": "49dc3499df795aad422a2e3f8d09a5e2352bf686"
+            "hash": "f292e4c8c9a6268418b17d7ff125bef64c961a4c",
+            "deps": ["npm:cypress", "npm:@nrwl/cypress"]
           },
           {
             "file": "apps/cart-e2e/project.json",
-            "hash": "1e9d604fb96854df9b579f00144e78c4a81def10"
+            "hash": "02852d8c5cc3c57e82bdfe47858d97b36a3a1cb6"
+          },
+          {
+            "file": "apps/cart-e2e/src/e2e/app.cy.ts",
+            "hash": "2971885c601f09176516333d80a59f6e61ceaf9f",
+            "deps": ["shared-e2e-utils"]
           },
           {
             "file": "apps/cart-e2e/src/fixtures/example.json",
             "hash": "294cbed6ce9e0b948b787452e8676aee486cb3be"
           },
-          {
-            "file": "apps/cart-e2e/src/integration/app.spec.ts",
-            "hash": "caae6c7558f1bdfa052af97eb192ad3ef9673921",
-            "deps": ["shared-e2e-utils"]
-          },
           {
             "file": "apps/cart-e2e/src/support/app.po.ts",
             "hash": "c29f04f1c8d7c8722fbf705b3d951333c4fb95fc"
@@ -896,12 +898,12 @@
             "hash": "ca4d256f3eb15dfabad1f5760c9b2d0ceb4c24b9"
           },
           {
-            "file": "apps/cart-e2e/src/support/index.ts",
+            "file": "apps/cart-e2e/src/support/e2e.ts",
             "hash": "3d469a6b6cf31eb66117d73e278bcf74f398f1db"
           },
           {
             "file": "apps/cart-e2e/tsconfig.json",
-            "hash": "c4f818ecd40fbce82c3e08bf25cde3043970f8f3"
+            "hash": "cc509a730e12498509bb7475f6f54b1a18021191"
           }
         ]
       }
@@ -922,12 +924,12 @@
             "hash": "09bf85ffde1b09ba5ee6a114f2ceeb11a4a892d1"
           },
           {
-            "file": "apps/products/jest.config.js",
+            "file": "apps/products/jest.config.ts",
-            "hash": "84f9579521f246fff44012f9ae4fd51c5d2d44f0"
+            "hash": "699704d393fd19b2ea2681b4e124b86008ef70c9"
           },
           {
             "file": "apps/products/project.json",
-            "hash": "17317c7731b0d92b1a606bd2998b48729579682f"
+            "hash": "4dfd29466f1cbb8bc8159f00629272c8d7823914"
           },
           {
             "file": "apps/products/src/_redirects",
@@ -943,17 +945,17 @@
           },
           {
             "file": "apps/products/src/app/app.component.spec.ts",
-            "hash": "b611bf15a7302118c40010c47faa14a6ee70d714",
+            "hash": "1f8a9866829d1ca8d1b82fd6db943428bbde8e65",
             "deps": ["npm:@angular/core", "npm:@angular/router"]
           },
           {
             "file": "apps/products/src/app/app.component.ts",
-            "hash": "67f74e1fe6f32700ab9eb84c28e8c5eb0a3816e6",
+            "hash": "ff3c08d367bbffd1a0467e9f6925f9fe16d7e81d",
             "deps": ["npm:@angular/core", "shared-header"]
           },
           {
             "file": "apps/products/src/app/app.module.ts",
-            "hash": "b83f636e0c945792e77ac5634ef6641041bc5e7a",
+            "hash": "814f3c4b6aa21425d7aabb8ff7b31fdc6999a5ae",
             "deps": [
               "npm:@angular/core",
               "npm:@angular/platform-browser",
@@ -969,11 +971,11 @@
           },
           {
             "file": "apps/products/src/environments/environment.prod.ts",
-            "hash": "3612073bc31cd4c1f5d6cbb00318521e9a61bd8a"
+            "hash": "c9669790be176ac85a5d8c11278875c2f52dc507"
           },
           {
             "file": "apps/products/src/environments/environment.ts",
-            "hash": "7b4f817adb754769ca126a939d48ac4b0850489d"
+            "hash": "99c3763cad6f4ae7808a34e2aa4e5b90232c67fc"
           },
           {
             "file": "apps/products/src/favicon.ico",
@@ -985,7 +987,7 @@
           },
           {
             "file": "apps/products/src/main.ts",
-            "hash": "fa4e0aef33721b84c2cc9f415da4770e770a68b4",
+            "hash": "d9a2e7e4a582e265db779363bd8b2492c43c141b",
             "deps": [
               "npm:@angular/core",
               "npm:@angular/platform-browser-dynamic"
@@ -1003,19 +1005,19 @@
           },
           {
             "file": "apps/products/tsconfig.app.json",
-            "hash": "47e4f8225ea7c019c84f7c5f1809237f34c7b0a9"
+            "hash": "24df375823651e81665dd43e74f8cbd86637b00f"
           },
           {
             "file": "apps/products/tsconfig.editor.json",
-            "hash": "20c4afdbf437457984afcb236d4b5e588aec858a"
+            "hash": "1bf3c0a7455d9f0731999e8ef4486967bbf3c0aa"
           },
           {
             "file": "apps/products/tsconfig.json",
-            "hash": "4ef4491ede9de763393e9ab15febd9091fbb1ca5"
+            "hash": "0eb8182debea7532f14b80b7c289ab7b66fc2aef"
           },
           {
             "file": "apps/products/tsconfig.spec.json",
-            "hash": "bc90aab0938ab8ffbc32039db0751502460d8794"
+            "hash": "b6347c6f667d5628388e11529377a125758fbe61"
           }
         ]
       }
@@ -1040,12 +1042,12 @@
             "hash": "37371cb04b9f1986d952499cdf9613c9d5d8ca8c"
           },
           {
-            "file": "apps/cart/jest.config.js",
+            "file": "apps/cart/jest.config.ts",
-            "hash": "bc0caa77b0c4f8593bd05bd8c52ec4e75a0bbbc8"
+            "hash": "af92cac53c45ca46b882c00a5f87d486a2755986"
           },
           {
             "file": "apps/cart/project.json",
-            "hash": "486a43541949283d79b3cc4fc446641f32598096"
+            "hash": "4a26f9eff1fa418de3843ed2e23f6109f1ae64fc"
           },
           {
             "file": "apps/cart/src/_redirects",
@@ -1058,7 +1060,7 @@
           },
           {
             "file": "apps/cart/src/app/app.tsx",
-            "hash": "6da2083c9105390d673a1b26622e6953dc1f3e47",
+            "hash": "4206822dc52f06828ef3192e385bad60262d8a40",
             "deps": ["npm:react-router-dom", "shared-header", "cart-cart-page"]
           },
           {
@@ -1067,11 +1069,11 @@
           },
           {
             "file": "apps/cart/src/environments/environment.prod.ts",
-            "hash": "3612073bc31cd4c1f5d6cbb00318521e9a61bd8a"
+            "hash": "c9669790be176ac85a5d8c11278875c2f52dc507"
           },
           {
             "file": "apps/cart/src/environments/environment.ts",
-            "hash": "d9370e924b51bc67ecddee7fc3b6693681a324b6"
+            "hash": "7ed83767fff25adfed19d52b2821a432f8ed18b1"
           },
           {
             "file": "apps/cart/src/favicon.ico",
@@ -1083,7 +1085,7 @@
           },
           {
             "file": "apps/cart/src/main.tsx",
-            "hash": "778281c772cc09a87375299eaba2f8be0c940b37",
+            "hash": "7991369e387a2b974b678a86c6eb006fd9757d8e",
             "deps": ["npm:react-dom", "npm:react-router-dom"]
           },
           {
@@ -1097,7 +1099,7 @@
           },
           {
             "file": "apps/cart/tsconfig.app.json",
-            "hash": "eeaffc3e153035823dd77eef7bbbd46fb742a997"
+            "hash": "ce67a8f6f0c3345266081568fbe122381c7b82a2"
           },
           {
             "file": "apps/cart/tsconfig.json",
@@ -1105,7 +1107,7 @@
           },
           {
             "file": "apps/cart/tsconfig.spec.json",
-            "hash": "ced70a327f2a70caa5ab84f33561b415a51cb60f"
+            "hash": "99a0ce08de0901250105669917e582aba6e8697e"
           }
         ]
       }
@@ -1200,20 +1202,12 @@
     ],
     "shared-assets": [],
     "shared-header": [
-      {
+      { "source": "shared-header", "target": "shared-jsxify", "type": "static" }
-        "source": "shared-header",
-        "target": "shared-jsxify",
-        "type": "static"
-      }
     ],
     "shared-jsxify": [],
     "shared-styles": [],
     "products-e2e": [
-      {
+      { "source": "products-e2e", "target": "products", "type": "implicit" },
-        "source": "products-e2e",
-        "target": "products",
-        "type": "implicit"
-      },
       {
         "source": "products-e2e",
         "target": "shared-e2e-utils",
@@ -1221,33 +1215,13 @@
       }
     ],
     "cart-e2e": [
-      {
+      { "source": "cart-e2e", "target": "cart", "type": "implicit" },
-        "source": "cart-e2e",
+      { "source": "cart-e2e", "target": "shared-e2e-utils", "type": "static" }
-        "target": "cart",
-        "type": "implicit"
-      },
-      {
-        "source": "cart-e2e",
-        "target": "shared-e2e-utils",
-        "type": "static"
-      }
     ],
     "products": [
-      {
+      { "source": "products", "target": "shared-assets", "type": "implicit" },
-        "source": "products",
+      { "source": "products", "target": "shared-styles", "type": "implicit" },
-        "target": "shared-assets",
+      { "source": "products", "target": "shared-header", "type": "static" },
-        "type": "implicit"
-      },
-      {
-        "source": "products",
-        "target": "shared-styles",
-        "type": "implicit"
-      },
-      {
-        "source": "products",
-        "target": "shared-header",
-        "type": "static"
-      },
       {
         "source": "products",
         "target": "products-home-page",
@@ -1260,32 +1234,13 @@
       }
     ],
     "cart": [
-      {
+      { "source": "cart", "target": "shared-assets", "type": "implicit" },
-        "source": "cart",
+      { "source": "cart", "target": "shared-styles", "type": "implicit" },
-        "target": "shared-assets",
+      { "source": "cart", "target": "shared-header", "type": "static" },
-        "type": "implicit"
+      { "source": "cart", "target": "cart-cart-page", "type": "static" }
-      },
-      {
-        "source": "cart",
-        "target": "shared-styles",
-        "type": "implicit"
-      },
-      {
-        "source": "cart",
-        "target": "shared-header",
-        "type": "static"
-      },
-      {
-        "source": "cart",
-        "target": "cart-cart-page",
-        "type": "static"
-      }
     ]
   },
-  "layout": {
+  "layout": { "appsDir": "apps", "libsDir": "libs" },
-    "appsDir": "apps",
-    "libsDir": "libs"
-  },
   "affected": [],
   "focus": null,
   "groupByFolder": false,

graph/client/src/assets/nx-console/environment.js

@@ -10,7 +10,7 @@ window.appConfig = {
     {
       id: 'local',
       label: 'local',
-      url: 'assets/graphs/nx-examples.json',
+      url: 'assets/graphs/e2e.json',
     },
   ],
   defaultProjectGraph: 'local',

graph/client/src/assets/release-static/environment.js

@@ -11,7 +11,7 @@ window.appConfig = {
     {
       id: 'local',
       label: 'local',
-      url: 'assets/graphs/nx-examples.json',
+      url: 'assets/graphs/e2e.json',
     },
   ],
   defaultProjectGraph: 'local',

graph/client/src/assets/release/environment.js

@@ -10,7 +10,7 @@ window.appConfig = {
     {
       id: 'local',
       label: 'local',
-      url: 'assets/graphs/nx-examples.json',
+      url: 'assets/graphs/e2e.json',
     },
   ],
   defaultProjectGraph: 'local',

graph/client/src/main.tsx

@@ -13,9 +13,19 @@ if (window.useXstateInspect === true) {
 
 window.externalApi = new ExternalApi();
 
+if (!window.appConfig) {
+  ReactDOM.render(
+    <p>
+      No environment could be found. Please run{' '}
+      <pre>npx nx run graph-client:generate-dev-environment-js</pre>.
+    </p>,
+    document.getElementById('app')
+  );
+} else {
   ReactDOM.render(
     <StrictMode>
       <App />
     </StrictMode>,
     document.getElementById('app')
   );
+}

scripts/generate-graph-environment.ts

@@ -0,0 +1,76 @@
+import * as yargs from 'yargs';
+import { ensureDirSync } from 'fs-extra';
+import { join } from 'path';
+import { writeFileSync, readdirSync } from 'fs';
+import { execSync } from 'child_process';
+
+function generateFileContent(
+  projects: { id: string; label: string; url: string }[]
+) {
+  return `
+  window.exclude = [];
+window.watch = false;
+window.environment = 'dev';
+window.useXstateInspect = false;
+
+window.appConfig = {
+  showDebugger: true,
+  showExperimentalFeatures: true,
+  projectGraphs: ${JSON.stringify(projects)},
+  defaultProjectGraph: '${projects[0].id}',
+};
+
+  `;
+}
+
+function writeFile() {
+  let generatedGraphs;
+  try {
+    generatedGraphs = readdirSync(
+      join(__dirname, '../graph/client/src/assets/generated-graphs')
+    ).map((filename) => {
+      const id = filename.substring(0, filename.length - 5);
+      return {
+        id,
+        label: id,
+        url: join('assets/generated-graphs/', filename),
+      };
+    });
+  } catch {
+    generatedGraphs = [];
+  }
+
+  let pregeneratedGraphs;
+  try {
+    pregeneratedGraphs = readdirSync(
+      join(__dirname, '../graph/client/src/assets/graphs')
+    ).map((filename) => {
+      const id = filename.substring(0, filename.length - 5);
+      return {
+        id,
+        label: id,
+        url: join('assets/graphs/', filename),
+      };
+    });
+  } catch {
+    pregeneratedGraphs = [];
+  }
+
+  // if no generated projects are found, generate one for nx and try this again
+  if (generatedGraphs.length === 0) {
+    execSync('nx run graph-client:generate-graph --directory ./ --name nx');
+    writeFile();
+    return;
+  }
+
+  const projects = generatedGraphs.concat(pregeneratedGraphs);
+
+  ensureDirSync(join(__dirname, '../graph/client/src/assets/dev/'));
+
+  writeFileSync(
+    join(__dirname, '../graph/client/src/assets/dev/', `environment.js`),
+    generateFileContent(projects)
+  );
+}
+
+writeFile();

scripts/generate-graph.ts

@@ -0,0 +1,63 @@
+import { execSync } from 'child_process';
+import { existsSync, mkdirSync, readFileSync, writeFileSync } from 'fs';
+import { join } from 'path';
+import * as yargs from 'yargs';
+import { ensureDirSync, statSync } from 'fs-extra';
+
+async function generateGraph(directory: string, name: string) {
+  if (!existsSync(directory)) {
+    console.error(`Could not find directory ${directory}`);
+    return;
+  }
+
+  try {
+    execSync(
+      'npx nx graph --file ./node_modules/.cache/nx-graph-gen/graph.html',
+      { cwd: directory, stdio: 'ignore' }
+    );
+  } catch {
+    console.error(`Could not run graph command in directory ${directory}`);
+    return;
+  }
+  const environmentJs = readFileSync(
+    join(directory, 'node_modules/.cache/nx-graph-gen/static/environment.js'),
+    { encoding: 'utf-8' }
+  );
+
+  const projectGraphResponse = environmentJs.match(
+    /window.projectGraphResponse = (.*?);/
+  );
+
+  ensureDirSync(
+    join(__dirname, '../graph/client/src/assets/generated-graphs/')
+  );
+
+  writeFileSync(
+    join(
+      __dirname,
+      '../graph/client/src/assets/generated-graphs/',
+      `${name}.json`
+    ),
+    projectGraphResponse[1]
+  );
+}
+
+(async () => {
+  const parsedArgs = yargs
+    .scriptName('yarn generate-graph')
+    .strictOptions()
+    .option('name', {
+      type: 'string',
+      requiresArg: true,
+      description:
+        'The version to publish. This does not need to be passed and can be inferred.',
+    })
+    .option('directory', {
+      type: 'string',
+      requiresArg: true,
+      description: 'Directory of workspace',
+    })
+    .parseSync();
+
+  generateGraph(parsedArgs.directory, parsedArgs.name);
+})();