feat(core): add dep-graph-client app (#3695)

apps/dep-graph-client-e2e/.eslintrc

@@ -0,0 +1,14 @@
+{
+  "rules": {},
+  "overrides": [
+    {
+      "files": ["src/plugins/index.js"],
+      "rules": {
+        "@typescript-eslint/no-var-requires": "off",
+        "no-undef": "off"
+      }
+    }
+  ],
+  "extends": ["plugin:cypress/recommended", "../../.eslintrc"],
+  "ignorePatterns": ["!**/*"]
+}

apps/dep-graph-client-e2e/cypress.json

@@ -0,0 +1,12 @@
+{
+  "fileServerFolder": ".",
+  "fixturesFolder": "./src/fixtures",
+  "integrationFolder": "./src/integration",
+  "modifyObstructiveCode": false,
+  "pluginsFile": "./src/plugins/index",
+  "supportFile": "./src/support/index.ts",
+  "video": true,
+  "videosFolder": "../../dist/cypress/apps/dep-graph-client-e2e/videos",
+  "screenshotsFolder": "../../dist/cypress/apps/dep-graph-client-e2e/screenshots",
+  "chromeWebSecurity": false
+}

apps/dep-graph-client-e2e/src/fixtures/example.json

@@ -0,0 +1,4 @@
+{
+  "name": "Using fixtures to represent data",
+  "email": "hello@cypress.io"
+}

apps/dep-graph-client-e2e/src/integration/app.spec.ts

@@ -0,0 +1,13 @@
+import { getGreeting } from '../support/app.po';
+
+describe('dep-graph-client', () => {
+  beforeEach(() => cy.visit('/'));
+
+  it('should display welcome message', () => {
+    // Custom command example, see `../support/commands.ts` file
+    cy.login('my-email@something.com', 'myPassword');
+
+    // Function helper example, see `../support/app.po.ts` file
+    getGreeting().contains('Welcome to dep-graph-client!');
+  });
+});

apps/dep-graph-client-e2e/src/plugins/index.js

@@ -0,0 +1,22 @@
+// ***********************************************************
+// This example plugins/index.js can be used to load plugins
+//
+// You can change the location of this file or turn off loading
+// the plugins file with the 'pluginsFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/plugins-guide
+// ***********************************************************
+
+// This function is called when a project is opened or re-opened (e.g. due to
+// the project's config changing)
+
+const { preprocessTypescript } = require('@nrwl/cypress/plugins/preprocessor');
+
+module.exports = (on, config) => {
+  // `on` is used to hook into various events Cypress emits
+  // `config` is the resolved Cypress config
+
+  // Preprocess Typescript file using Nx helper
+  on('file:preprocessor', preprocessTypescript(config));
+};

apps/dep-graph-client-e2e/src/support/app.po.ts

@@ -0,0 +1 @@
+export const getGreeting = () => cy.get('h1');

apps/dep-graph-client-e2e/src/support/commands.ts

@@ -0,0 +1,31 @@
+// ***********************************************
+// This example commands.js shows you how to
+// create various custom commands and overwrite
+// existing commands.
+//
+// For more comprehensive examples of custom
+// commands please read more here:
+// https://on.cypress.io/custom-commands
+// ***********************************************
+// eslint-disable-next-line @typescript-eslint/no-namespace
+declare namespace Cypress {
+  interface Chainable<Subject> {
+    login(email: string, password: string): void;
+  }
+}
+//
+// -- This is a parent command --
+Cypress.Commands.add('login', (email, password) => {
+  console.log('Custom command example: Login', email, password);
+});
+//
+// -- This is a child command --
+// Cypress.Commands.add("drag", { prevSubject: 'element'}, (subject, options) => { ... })
+//
+//
+// -- This is a dual command --
+// Cypress.Commands.add("dismiss", { prevSubject: 'optional'}, (subject, options) => { ... })
+//
+//
+// -- This will overwrite an existing command --
+// Cypress.Commands.overwrite("visit", (originalFn, url, options) => { ... })

apps/dep-graph-client-e2e/src/support/index.ts

@@ -0,0 +1,17 @@
+// ***********************************************************
+// This example support/index.js is processed and
+// loaded automatically before your test files.
+//
+// This is a great place to put global configuration and
+// behavior that modifies Cypress.
+//
+// You can change the location of this file or turn off
+// automatically serving support files with the
+// 'supportFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/configuration
+// ***********************************************************
+
+// Import commands.js using ES2015 syntax:
+import './commands';

apps/dep-graph-client-e2e/tsconfig.e2e.json

@@ -0,0 +1,10 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "sourceMap": false,
+    "outDir": "../../dist/out-tsc",
+    "allowJs": true,
+    "types": ["cypress", "node"]
+  },
+  "include": ["src/**/*.ts", "src/**/*.js"]
+}

apps/dep-graph-client-e2e/tsconfig.json

@@ -0,0 +1,10 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "files": [],
+  "include": [],
+  "references": [
+    {
+      "path": "./tsconfig.e2e.json"
+    }
+  ]
+}

apps/dep-graph-client/.babelrc

@@ -0,0 +1 @@
+{}

apps/dep-graph-client/.eslintrc

@@ -0,0 +1 @@
+{ "extends": "../../.eslintrc", "rules": {}, "ignorePatterns": ["!**/*"] }

apps/dep-graph-client/browserslist

@@ -0,0 +1,13 @@
+# This file is currently used by autoprefixer to adjust CSS to support the below specified browsers
+# For additional information regarding the format and rule options, please see:
+# https://github.com/browserslist/browserslist#queries
+#
+# If you need to support different browsers in production, you may tweak the list below.
+
+last 1 Chrome version
+last 1 Firefox version
+last 2 Edge major versions
+last 2 Safari major version
+last 2 iOS major versions
+Firefox ESR
+not IE 9-11 # For IE 9-11 support, remove 'not'.

apps/dep-graph-client/jest.config.js

@@ -0,0 +1,10 @@
+module.exports = {
+  name: 'dep-graph-client',
+  setupFilesAfterEnv: ['<rootDir>/src/test-setup.ts'],
+  globals: {
+    'ts-jest': {
+      tsConfig: '<rootDir>/tsconfig.spec.json',
+    },
+  },
+  coverageDirectory: '../../coverage/apps/dep-graph-client',
+};

apps/dep-graph-client/src/dep-graph/dep-graph.ts

@@ -1,3 +1,7 @@
+import { default as tippy, hideAll } from 'tippy.js';
+import { select, curveBasis, zoom, zoomIdentity } from 'd3';
+import * as dagreD3 from 'dagre-d3';
+
 function getProjectsByType(type) {
   return window.projects.filter((project) => project.type === type);
 }
@@ -57,7 +61,7 @@ function createProjectList(headerText, projects) {
     focusButton.append(buttonIconContainer);
 
     focusButton.onclick = () => {
-      window.focusProject(project.name);
+      focusProject(project.name);
     };
 
     let label = document.createElement('label');
@@ -125,28 +129,6 @@ function addProjectCheckboxes() {
   }
 }
 
-function autoExclude() {
-  const dependencyCounts = {};
-
-  window.projects.forEach((p) => {
-    dependencyCounts[p.name] = 0;
-  });
-
-  Object.keys(graph.dependencies).forEach((p) => {
-    graph.dependencies[p].forEach((d) => {
-      dependencyCounts[d.target]++;
-    });
-  });
-
-  Object.keys(dependencyCounts)
-    .filter((d) => dependencyCounts[d] > 5 || dependencyCounts[d] === 0)
-    .forEach((d) => {
-      document.querySelector(
-        `input[name=projectName][value=${d}]`
-      ).checked = false;
-    });
-}
-
 function hasPath(target, node, visited) {
   if (target === node) return true;
 
@@ -158,7 +140,7 @@ function hasPath(target, node, visited) {
   return false;
 }
 
-function getProjectCheckboxes() {
+function getProjectCheckboxes(): HTMLInputElement[] {
   return Array.from(document.querySelectorAll('input[name=projectName]'));
 }
 
@@ -175,7 +157,7 @@ function checkForAffected() {
   }
 }
 
-window.selectAffectedProjects = () => {
+function selectAffectedProjects() {
   window.focusedProject = null;
   document.getElementById('focused-project').hidden = true;
   document.getElementById('focused-project-name').innerText = '';
@@ -185,9 +167,11 @@ window.selectAffectedProjects = () => {
   });
 
   window.filterProjects();
-};
+}
 
-window.selectAllProjects = () => {
+window.selectAffectedProjects = selectAffectedProjects;
+
+function selectAllProjects() {
   window.focusedProject = null;
   document.getElementById('focused-project').hidden = true;
   document.getElementById('focused-project-name').innerText = '';
@@ -197,9 +181,11 @@ window.selectAllProjects = () => {
   });
 
   window.filterProjects();
-};
+}
 
-window.deselectAllProjects = () => {
+window.selectAllProjects = selectAllProjects;
+
+function deselectAllProjects() {
   window.focusedProject = null;
   document.getElementById('focused-project').hidden = true;
   document.getElementById('focused-project-name').innerText = '';
@@ -209,7 +195,9 @@ window.deselectAllProjects = () => {
   });
 
   window.filterProjects();
-};
+}
+
+window.deselectAllProjects = deselectAllProjects;
 
 function createDirectoryParents(g, directories) {
   let childDirectory = directories.join('/');
@@ -238,12 +226,12 @@ function createDirectoryParents(g, directories) {
 }
 
 function generateLayout() {
-  const g = new window.dagreD3.graphlib.Graph({
+  const g = new dagreD3.graphlib.Graph({
     compound: true,
     orderRestarts: 10,
   });
 
-  const groupByFolder = document.querySelector(
+  const groupByFolder = document.querySelector<HTMLInputElement>(
     'input[name=displayOptions][value=groupByFolder]'
   ).checked;
 
@@ -290,9 +278,9 @@ function generateLayout() {
     }
   });
 
-  Object.keys(graph.dependencies).forEach((p) => {
+  Object.keys(window.graph.dependencies).forEach((p) => {
     const filteredProjectNames = window.filteredProjects.map((f) => f.name);
-    graph.dependencies[p].forEach((d) => {
+    window.graph.dependencies[p].forEach((d) => {
       if (
         filteredProjectNames.indexOf(p) > -1 &&
         filteredProjectNames.indexOf(d.target) > -1
@@ -311,7 +299,7 @@ function generateLayout() {
         g.setEdge(p, d.target, {
           label: label,
           class: clazz,
-          curve: window.d3.curveBasis,
+          curve: curveBasis,
         });
       }
     });
@@ -336,7 +324,7 @@ function createRenderer() {
       .attr('filter', `url(#${filter})`);
 
     node.intersect = function (point) {
-      return window.dagreD3.intersect.rect(node, point);
+      return dagreD3.intersect.rect(node, point);
     };
 
     return shapeSvg;
@@ -358,7 +346,7 @@ function createRenderer() {
       .attr('filter', `url(#${filter})`);
 
     node.intersect = function (point) {
-      return window.dagreD3.intersect.ellipse(node, rx, ry, point);
+      return dagreD3.intersect.ellipse(node, rx, ry, point);
     };
 
     return shapeSvg;
@@ -368,21 +356,21 @@ function createRenderer() {
 }
 
 function render() {
-  tippy.hideAll();
+  hideAll();
 
   const g = generateLayout();
   const render = createRenderer();
 
   // Set up an SVG group so that we can translate the final graph.
-  var svg = d3.select('#svg-canvas');
+  var svg = select('#svg-canvas');
   svg.select('g').remove();
   let inner = svg.append('g');
 
   // Set up zoom support
-  var zoom = d3.zoom().on('zoom', function () {
-    inner.attr('transform', d3.event.transform);
+  var z = zoom().on('zoom', function (event: any) {
+    inner.attr('transform', event.transform);
   });
-  svg.call(zoom);
+  svg.call(z);
 
   // Run the renderer. This is what draws the final graph.
   setTimeout(() => {
@@ -394,9 +382,12 @@ function render() {
     const mainContent = document.getElementById('main-content');
 
     svg.call(
-      zoom.transform,
-      d3.zoomIdentity
-        .translate((svg.attr('width') - g.graph().width * initialScale) / 2, 20)
+      z.transform as any,
+      zoomIdentity
+        .translate(
+          (+svg.attr('width') - g.graph().width * initialScale) / 2,
+          20
+        )
         .scale(initialScale)
     );
 
@@ -425,6 +416,7 @@ function addTooltips(inner) {
     const project = window.projects.find((p) => p.name === id);
     tippy(this, {
       content: createTipTemplate(project),
+      allowHTML: true,
       interactive: true,
       appendTo: document.body,
       interactiveBorder: 10,
@@ -433,54 +425,60 @@ function addTooltips(inner) {
   });
 }
 
-window.focusProject = (id, doFilter = true) => {
+function focusProject(id, doFilter = true) {
   window.focusedProject = id;
 
   document.getElementById('focused-project').hidden = false;
   document.getElementById('focused-project-name').innerText = id;
 
-  Array.from(document.querySelectorAll('input[name=projectName]')).forEach(
-    (checkbox) => {
-      const showProject =
-        hasPath(id, checkbox.value, []) || hasPath(checkbox.value, id, []);
-      checkbox.checked = showProject;
-      checkbox.parentElement.hidden = !showProject;
-    }
-  );
+  Array.from(
+    document.querySelectorAll<HTMLInputElement>('input[name=projectName]')
+  ).forEach((checkbox) => {
+    const showProject =
+      hasPath(id, checkbox.value, []) || hasPath(checkbox.value, id, []);
+    checkbox.checked = showProject;
+    checkbox.parentElement.hidden = !showProject;
+  });
 
   if (doFilter) {
     window.filterProjects();
   }
-};
+}
 
-window.unfocusProject = () => {
+window.focusProject = focusProject;
+
+function unfocusProject() {
   window.focusedProject = null;
   document.getElementById('focused-project').hidden = true;
   document.getElementById('focused-project-name').innerText = '';
 
-  Array.from(document.querySelectorAll('input[name=projectName]')).forEach(
-    (checkbox) => {
-      checkbox.checked = false;
-      checkbox.parentElement.hidden = false;
-    }
-  );
+  Array.from(
+    document.querySelectorAll<HTMLInputElement>('input[name=projectName]')
+  ).forEach((checkbox) => {
+    checkbox.checked = false;
+    checkbox.parentElement.hidden = false;
+  });
 
   window.filterProjects();
-};
+}
 
-window.excludeProject = (id, doFilter = true) => {
-  document.querySelector(
+window.unfocusProject = unfocusProject;
+
+function excludeProject(id, doFilter = true) {
+  document.querySelector<HTMLInputElement>(
     `input[name=projectName][value=${id}]`
   ).checked = false;
 
   if (doFilter) {
     window.filterProjects();
   }
-};
+}
 
-window.filterProjects = () => {
+window.excludeProject = excludeProject;
+
+function filterProjects() {
   const checkboxes = Array.from(
-    document.querySelectorAll('input[name=projectName]')
+    document.querySelectorAll<HTMLInputElement>('input[name=projectName]')
   );
 
   const selectedProjects = checkboxes
@@ -509,10 +507,14 @@ window.filterProjects = () => {
     document.getElementById('no-projects-chosen').style.display = 'none';
   }
   render();
-};
+}
+
+window.filterProjects = filterProjects;
 
 function listenForTextFilterChanges() {
-  const textFilterInput = document.getElementById('textFilterInput');
+  const textFilterInput = document.getElementById(
+    'textFilterInput'
+  ) as HTMLInputElement;
   const textFilterButton = document.getElementById('textFilterButton');
 
   textFilterButton.addEventListener('click', () => {
@@ -528,7 +530,7 @@ function listenForTextFilterChanges() {
 
 function filterProjectsByText(text) {
   const checkboxes = Array.from(
-    document.querySelectorAll('input[name=projectName]')
+    document.querySelectorAll<HTMLInputElement>('input[name=projectName]')
   );
 
   checkboxes.forEach((checkbox) => (checkbox.checked = false));
@@ -542,8 +544,9 @@ function filterProjectsByText(text) {
         split.findIndex((splitItem) => project.includes(splitItem)) > -1
     );
 
-  const includeInPath = document.querySelector('input[name=textFilterCheckbox]')
-    .checked;
+  const includeInPath = document.querySelector<HTMLInputElement>(
+    'input[name=textFilterCheckbox]'
+  ).checked;
 
   matchedProjects.forEach((project) => {
     checkboxes.forEach((checkbox) => {
@@ -561,7 +564,7 @@ function filterProjectsByText(text) {
   window.filterProjects();
 }
 
-setTimeout(() => {
+export function main() {
   addProjectCheckboxes();
   checkForAffected();
 
@@ -572,7 +575,7 @@ setTimeout(() => {
   window.addEventListener('resize', () => render());
 
   if (window.groupByFolder) {
-    document.querySelector(
+    document.querySelector<HTMLInputElement>(
       'input[name=displayOptions][value=groupByFolder]'
     ).checked = true;
   }
@@ -588,4 +591,4 @@ setTimeout(() => {
   listenForTextFilterChanges();
 
   filterProjects();
-});
+}

apps/dep-graph-client/src/environments/environment.prod.ts

@@ -0,0 +1,3 @@
+export const environment = {
+  production: true,
+};

apps/dep-graph-client/src/environments/environment.ts

@@ -0,0 +1,6 @@
+// This file can be replaced during build by using the `fileReplacements` array.
+// When building for production, this file is replaced with `environment.prod.ts`.
+
+export const environment = {
+  production: false,
+};

apps/dep-graph-client/src/globals.d.ts

@@ -0,0 +1,20 @@
+import { ProjectGraph, ProjectGraphNode } from '@nrwl/workspace';
+
+export declare global {
+  export interface Window {
+    projects: ProjectGraphNode[];
+    graph: ProjectGraph;
+    filteredProjects: ProjectGraphNode[];
+    affected: string[];
+    exclude: string[];
+    focusedProject: string;
+    groupByFolder: boolean;
+    focusProject: Function;
+    unfocusProject: Function;
+    excludeProject: Function;
+    selectAffectedProjects: Function;
+    filterProjects: Function;
+    selectAllProjects: Function;
+    deselectAllProjects: Function;
+  }
+}

apps/dep-graph-client/src/index.html

@@ -1,10 +1,15 @@
 <!DOCTYPE html>
 <head>
+  <meta charset="utf-8" />
+
+  <title>DepGraphClient</title>
+  <base href="/" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+
   <link
     href="https://fonts.googleapis.com/css?family=Montserrat&display=swap"
     rel="stylesheet"
   />
-  <link rel="stylesheet" href="dep-graph.css" />
 </head>
 <body>
   <svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
@@ -132,7 +137,4 @@
     window.groupByFolder = null;
     window.exclude = null;
   </script>
-
-  <script src="vendor.js"></script>
-  <script src="dep-graph.js"></script>
 </body>

apps/dep-graph-client/src/main.release.ts

@@ -0,0 +1,3 @@
+import { main } from './dep-graph/dep-graph';
+
+setTimeout(() => main());

apps/dep-graph-client/src/main.ts

@@ -0,0 +1,15 @@
+import { main } from './dep-graph/dep-graph';
+import { mediumGraph } from './graphs/medium';
+
+const currentGraph = mediumGraph;
+
+const nodes = Object.values(currentGraph.nodes).filter(
+  (node) => node.type !== 'npm'
+);
+
+window.projects = nodes;
+window.graph = currentGraph;
+window.affected = [];
+window.exclude = [];
+
+setTimeout(() => main());

apps/dep-graph-client/src/polyfills.ts

@@ -0,0 +1,7 @@
+/**
+ * Polyfill stable language features. These imports will be optimized by `@babel/preset-env`.
+ *
+ * See: https://github.com/zloirock/core-js#babel
+ */
+import 'core-js/stable';
+import 'regenerator-runtime/runtime';

apps/dep-graph-client/src/styles.scss

@@ -1,3 +1,5 @@
+@import '~tippy.js/dist/tippy.css';
+
 :root {
   --color-nrwl-blue: #48c4e5;
   --color-nrwl-light-blue: #96d8e9;
@@ -221,7 +223,7 @@ g.affected ellipse {
   color: var(--color-nrwl-twilight);
 }
 
-.tippy-tooltip {
+.tippy-box {
   background-color: var(--color-nrwl-twilight);
 }
 

apps/dep-graph-client/src/test-setup.ts

@@ -0,0 +1 @@
+import 'document-register-element';

apps/dep-graph-client/tsconfig.app.json

@@ -0,0 +1,10 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../dist/out-tsc",
+    "types": ["node"],
+    "lib": ["DOM"]
+  },
+  "exclude": ["**/*.spec.ts"],
+  "include": ["**/*.ts"]
+}

apps/dep-graph-client/tsconfig.json

@@ -0,0 +1,13 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "files": [],
+  "include": [],
+  "references": [
+    {
+      "path": "./tsconfig.app.json"
+    },
+    {
+      "path": "./tsconfig.spec.json"
+    }
+  ]
+}

apps/dep-graph-client/tsconfig.spec.json

@@ -0,0 +1,10 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../dist/out-tsc",
+    "module": "commonjs",
+    "types": ["jest", "node"]
+  },
+  "files": ["src/test-setup.ts"],
+  "include": ["**/*.spec.ts", "**/*.d.ts"]
+}

babel.config.json

@@ -0,0 +1,4 @@
+{
+  "presets": ["@nrwl/web/babel"],
+  "babelrcRoots": ["*"]
+}

e2e/workspace/src/workspace-aux-commands.test.ts

@@ -546,9 +546,10 @@ forEachCli((cli) => {
       runCommand(`npm run dep-graph -- --file=project-graph.html`);
 
       expect(() => checkFilesExist('project-graph.html')).not.toThrow();
-      expect(() => checkFilesExist('static/dep-graph.css')).not.toThrow();
-      expect(() => checkFilesExist('static/dep-graph.js')).not.toThrow();
-      expect(() => checkFilesExist('static/vendor.js')).not.toThrow();
+      expect(() => checkFilesExist('static/styles.css')).not.toThrow();
+      expect(() => checkFilesExist('static/runtime.js')).not.toThrow();
+      expect(() => checkFilesExist('static/polyfills.esm.js')).not.toThrow();
+      expect(() => checkFilesExist('static/main.esm.js')).not.toThrow();
     });
   });
 

nx.json

@@ -54,7 +54,7 @@
     },
     "react": {
       "tags": [],
-      "implicitDependencies": ["workspace", "cypress", "jest"]
+      "implicitDependencies": ["workspace", "cypress", "jest", "web"]
     },
     "storybook": {
       "tags": [],
@@ -161,6 +161,13 @@
     "e2e-workspace": {
       "tags": [],
       "implicitDependencies": ["workspace", "create-nx-workspace"]
+    },
+    "dep-graph-client": {
+      "tags": ["core"]
+    },
+    "dep-graph-client-e2e": {
+      "tags": [],
+      "implicitDependencies": ["dep-graph-client"]
     }
   },
   "affected": {

package.json

@@ -65,10 +65,12 @@
     "@ngrx/store-devtools": "9.1.0",
     "@ngtools/webpack": "~10.1.3",
     "@nrwl/cli": "10.3.0-rc.3",
+    "@nrwl/cypress": "10.3.1-beta.1",
     "@nrwl/eslint-plugin-nx": "10.3.1-beta.1",
     "@nrwl/jest": "10.3.1-beta.1",
     "@nrwl/node": "10.3.1-beta.1",
     "@nrwl/nx-cloud": "10.1.6",
+    "@nrwl/web": "10.3.1-beta.1",
     "@nrwl/workspace": "10.3.1-beta.1",
     "@reduxjs/toolkit": "1.3.2",
     "@rollup/plugin-babel": "5.0.2",
@@ -84,6 +86,7 @@
     "@svgr/webpack": "^5.4.0",
     "@testing-library/react": "9.4.0",
     "@types/copy-webpack-plugin": "6.0.0",
+    "@types/d3": "^5.7.2",
     "@types/eslint": "^7.2.2",
     "@types/express": "4.17.0",
     "@types/fs-extra": "7.0.0",
@@ -133,10 +136,14 @@
     "cz-conventional-changelog": "^3.0.2",
     "cz-customizable": "^6.2.0",
     "depcheck": "^1.2.0",
+    "d3": "^6.1.1",
+    "d3-zoom": "^2.0.0",
+    "dagre-d3": "^0.6.4",
     "document-register-element": "^1.13.1",
     "dotenv": "6.2.0",
     "eslint": "7.10.0",
     "eslint-config-prettier": "6.0.0",
+    "eslint-plugin-cypress": "^2.10.3",
     "eslint-plugin-import": "^2.20.1",
     "eslint-plugin-jsx-a11y": "^6.2.3",
     "eslint-plugin-react": "^7.18.3",
@@ -219,6 +226,7 @@
     "tar": "5.0.5",
     "terser": "4.3.8",
     "terser-webpack-plugin": "2.3.1",
+    "tippy.js": "^6.2.6",
     "tmp": "0.0.33",
     "tree-kill": "1.2.2",
     "ts-jest": "26.4.0",

packages/workspace/index.ts

@@ -26,6 +26,12 @@ export { commandsObject } from './src/command-line/nx-commands';
 export { supportedNxCommands } from './src/command-line/supported-nx-commands';
 export { readWorkspaceJson, readNxJson } from './src/core/file-utils';
 export { NxJson } from './src/core/shared-interfaces';
+export {
+  ProjectGraphNode,
+  ProjectGraphDependency,
+  ProjectGraph,
+} from './src/core/project-graph';
+export { ProjectGraphCache } from './src/core/nx-deps/nx-deps-cache';
 export {
   readJsonInTree,
   updateJsonInTree,

packages/workspace/src/command-line/dep-graph.ts

@@ -43,7 +43,7 @@ function projectsToHtml(
   exclude: string[]
 ) {
   let f = readFileSync(
-    join(__dirname, '../core/dep-graph/dep-graph.html')
+    join(__dirname, '../core/dep-graph/index.html')
   ).toString();
 
   f = f
@@ -218,7 +218,7 @@ export function generateGraph(
       const assets: string[] = [];
       copySync(join(__dirname, '../core/dep-graph'), assetsFolder, {
         filter: (src, dest) => {
-          const isntHtml = !/dep-graph\.html/.test(dest);
+          const isntHtml = !/index\.html/.test(dest);
           if (isntHtml && dest.includes('.')) {
             assets.push(dest);
           }
@@ -226,10 +226,11 @@ export function generateGraph(
         },
       });
 
-      html = html.replace(
-        /<(script.*|link.*)="(.*\.(?:js|css))"(><\/script>| \/>?)/g,
-        '<$1="static/$2"$3'
-      );
+      html = html.replace(/src="/g, 'src="static/');
+      html = html.replace(/href="styles/g, 'href="static/styles');
+      html = html.replace('<base href="/">', '');
+      html = html.replace(/type="module"/g, '');
+
       writeFileSync(filename, html);
 
       output.success({

packages/workspace/src/command-line/list.ts

@@ -1,4 +1,4 @@
-import yargs = require('yargs');
+import * as yargs from 'yargs';
 import { appRootPath } from '../utils/app-root';
 import { output } from '../utils/output';
 import {

scripts/copy-dep-graph.js

@@ -0,0 +1,6 @@
+const fs = require('fs-extra');
+
+fs.copySync(
+  'build/apps/dep-graph',
+  'build/packages/workspace/src/core/dep-graph'
+);

workspace.json

@@ -209,6 +209,12 @@
               {
                 "command": "nx build-base workspace"
               },
+              {
+                "command": "nx build-base dep-graph-client --configuration release"
+              },
+              {
+                "command": "node ./scripts/copy-dep-graph.js"
+              },
               {
                 "command": "node ./scripts/copy-readme.js workspace"
               }
@@ -594,9 +600,21 @@
                 "glob": "**/files/**/.browserslistrc__tmpl__",
                 "output": "/"
               },
-              { "input": "packages/react", "glob": "**/*.json", "output": "/" },
-              { "input": "packages/react", "glob": "**/*.d.ts", "output": "/" },
-              { "input": "packages/react", "glob": "**/*.js", "output": "/" },
+              {
+                "input": "packages/react",
+                "glob": "**/*.json",
+                "output": "/"
+              },
+              {
+                "input": "packages/react",
+                "glob": "**/*.d.ts",
+                "output": "/"
+              },
+              {
+                "input": "packages/react",
+                "glob": "**/*.js",
+                "output": "/"
+              },
               "LICENSE"
             ]
           }
@@ -1744,6 +1762,114 @@
           }
         }
       }
+    },
+    "dep-graph-client": {
+      "root": "apps/dep-graph-client",
+      "sourceRoot": "apps/dep-graph-client/src",
+      "projectType": "application",
+      "schematics": {},
+      "architect": {
+        "build-base": {
+          "builder": "@nrwl/web:build",
+          "options": {
+            "maxWorkers": 8,
+            "outputPath": "build/apps/dep-graph",
+            "index": "apps/dep-graph-client/src/index.html",
+            "main": "apps/dep-graph-client/src/main.ts",
+            "polyfills": "apps/dep-graph-client/src/polyfills.ts",
+            "tsConfig": "apps/dep-graph-client/tsconfig.app.json",
+            "assets": [
+              "apps/dep-graph-client/src/favicon.ico",
+              "apps/dep-graph-client/src/assets"
+            ],
+            "styles": ["apps/dep-graph-client/src/styles.scss"],
+            "scripts": []
+          },
+          "configurations": {
+            "release": {
+              "fileReplacements": [
+                {
+                  "replace": "apps/dep-graph-client/src/main.ts",
+                  "with": "apps/dep-graph-client/src/main.release.ts"
+                }
+              ],
+              "optimization": true,
+              "outputHashing": "none",
+              "sourceMap": false,
+              "extractCss": true,
+              "namedChunks": false,
+              "extractLicenses": true,
+              "vendorChunk": false,
+              "budgets": [
+                {
+                  "type": "initial",
+                  "maximumWarning": "2mb",
+                  "maximumError": "5mb"
+                }
+              ]
+            }
+          }
+        },
+        "serve": {
+          "builder": "@nrwl/web:dev-server",
+          "options": {
+            "buildTarget": "dep-graph-client:build-base"
+          },
+          "configurations": {
+            "release": {
+              "buildTarget": "dep-graph-client:build-base:release"
+            }
+          }
+        },
+        "lint": {
+          "builder": "@nrwl/linter:lint",
+          "options": {
+            "linter": "eslint",
+            "tsConfig": [
+              "apps/dep-graph-client/tsconfig.app.json",
+              "apps/dep-graph-client/tsconfig.spec.json"
+            ],
+            "exclude": ["**/node_modules/**", "!apps/dep-graph-client/**/*"]
+          }
+        },
+        "test": {
+          "builder": "@nrwl/jest:jest",
+          "options": {
+            "jestConfig": "apps/dep-graph-client/jest.config.js",
+            "tsConfig": "apps/dep-graph-client/tsconfig.spec.json",
+            "passWithNoTests": true,
+            "setupFile": "apps/dep-graph-client/src/test-setup.ts"
+          }
+        }
+      }
+    },
+    "dep-graph-client-e2e": {
+      "root": "apps/dep-graph-client-e2e",
+      "sourceRoot": "apps/dep-graph-client-e2e/src",
+      "projectType": "application",
+      "architect": {
+        "e2e": {
+          "builder": "@nrwl/cypress:cypress",
+          "options": {
+            "cypressConfig": "apps/dep-graph-client-e2e/cypress.json",
+            "tsConfig": "apps/dep-graph-client-e2e/tsconfig.e2e.json",
+            "devServerTarget": "dep-graph-client:serve"
+          },
+          "configurations": {
+            "release": {
+              "devServerTarget": "dep-graph-client:serve:release"
+            }
+          }
+        },
+        "lint": {
+          "builder": "@nrwl/linter:lint",
+          "options": {
+            "linter": "eslint",
+            "tsConfig": ["apps/dep-graph-client-e2e/tsconfig.e2e.json"],
+            "exclude": ["**/node_modules/**", "!apps/dep-graph-client-e2e/**/*"]
+          }
+        }
+      }
     }
   },
   "cli": {