feat(graph): write nx-console e2e tests for the new tooltip functionality

closed #18404

.cargo/config.toml

@@ -0,0 +1,12 @@
+[build]
+target-dir = 'build/target'
+
+[target.x86_64-unknown-linux-musl]
+rustflags = [
+    "-C",
+    "target-feature=-crt-static",
+]
+
+[target.aarch64-unknown-linux-musl]
+linker = "aarch64-linux-musl-gcc"
+rustflags = ["-C", "target-feature=-crt-static"]

.circleci/config.yml

@@ -4,74 +4,70 @@ version: 2.1
 #        ORBS
 # -------------------------
 orbs:
-  nx: nrwl/nx@1.5.1
-  node: circleci/node@5.0.2
-
-# -------------------------
-#        DEFAULTS
-# -------------------------
-machine:
-  pre:
-    - mkdir ~/.cache/yarn
-    - mkdir ~/.cache/Cypress
-    - mkdir ~/Library/Caches/Homebrew
-    - mkdir /usr/local/Homebrew
-
-dependencies:
-  cache_directories:
-    - ~/.cache/yarn
-    - ~/.cache/Cypress
-    - /usr/local/Homebrew
-    - ~/Library/Caches/Homebrew
-  override:
-    - yarn install
-    - brew install
-
-defaults: &defaults
-  working_directory: ~/repo
+  nx: nrwl/nx@1.6.1
+  rust: circleci/rust@1.6.0
+  browser-tools: circleci/browser-tools@1.4.0
 
 # -------------------------
 #        EXECUTORS
 # -------------------------
+
+defaults: &defaults
+  working_directory: ~/repo
+
 executors:
   linux:
     <<: *defaults
     docker:
-      - image: cimg/node:lts-browsers
+      - image: cimg/rust:1.70.0-browsers
+    resource_class: medium+
 
   macos:
     <<: *defaults
+    resource_class: macos.x86.medium.gen2
     macos:
-      xcode: &_XCODE_VERSION '13.0.0'
+      xcode: '14.2.0'
 
 # -------------------------
 #        COMMANDS
 # -------------------------
 commands:
-  run-yarn-install:
+  run-pnpm-install:
     parameters:
       os:
         type: string
     steps:
       - restore_cache:
-          name: Restore Yarn Package Cache
+          name: Restore pnpm Package Cache
           keys:
-            - node-deps-{{ arch }}-v1-{{ checksum "package.json" }}-{{ checksum "yarn.lock" }}
+            - node-deps-{{ arch }}-v3-{{ checksum "pnpm-lock.yaml" }}
+      - when:
+          condition:
+            equal: [<< parameters.os >>, linux]
+          steps:
+            - run:
+                name: Install pnpm package manager (linux)
+                command: |
+                  npm install --prefix=$HOME/.local -g @pnpm/exe@8.3.1
+      - when:
+          condition:
+            equal: [<< parameters.os >>, macos]
+          steps:
+            - run:
+                name: Install pnpm package manager (macos)
+                command: |
+                  npm install -g @pnpm/exe@8.3.1
       - run:
-          name: Install dependencies
-          command: yarn install --prefer-offline --frozen-lockfile --non-interactive --cache-folder ~/.cache/yarn
+          name: Install Dependencies
+          command: |
+            pnpm install --frozen-lockfile
       - save_cache:
-          name: Save Yarn Package Cache
-          key: node-deps-{{ arch }}-v1-{{ checksum "package.json" }}-{{ checksum "yarn.lock" }}
+          name: Save pnpm Package Cache
+          key: node-deps-{{ arch }}-v3-{{ checksum "pnpm-lock.yaml" }}
           paths:
-            - node_modules
-            - ~/.cache/yarn
+            - ~/.pnpm-store
             - ~/.cache/Cypress
-  install-pnpm:
-    steps:
-      - run:
-          name: Install PNPM
-          command: npm install --prefix=$HOME/.local -g pnpm@6.32.4
+            - node_modules
 
   setup:
     parameters:
@@ -100,14 +96,18 @@ commands:
                 paths:
                   - /usr/local/Homebrew
                   - ~/Library/Caches/Homebrew
-
-      - run-yarn-install:
-          os: << parameters.os >>
       - when:
           condition:
             equal: [<< parameters.os >>, linux]
           steps:
-            - install-pnpm
+            - run:
+                command: |
+                  sudo apt-get update
+                  sudo apt-get install -y ca-certificates lsof
+            - browser-tools/install-chrome
+            - browser-tools/install-chromedriver
+      - run-pnpm-install:
+          os: << parameters.os >>
 
 # -------------------------
 #          JOBS
@@ -132,18 +132,25 @@ jobs:
       GIT_COMMITTER_NAME: Test
       NX_E2E_CI_CACHE_KEY: e2e-circleci-<< parameters.os >>
       SELECTED_PM: << parameters.pm >>
-      NX_E2E_RUN_CYPRESS: 'false'
+      NX_E2E_RUN_E2E: 'true'
       NX_VERBOSE_LOGGING: 'false'
+      NX_NATIVE_LOGGING: 'false'
+      NX_PERF_LOGGING: 'false'
     steps:
+      - run:
+          name: Configure git metadata (needed for lerna smoke tests)
+          command: |
+            git config --global user.email test@test.com
+            git config --global user.name "Test Test"
       - run:
           name: Set dynamic nx run variable
           command: |
-            echo "export NX_RUN_GROUP=\"run-group-<< parameters.os >>-$CIRCLE_WORKFLOW_ID\";" >> $BASH_ENV
+            echo "export NX_CI_EXECUTION_ENV=\"<< parameters.os >>\";" >> $BASH_ENV
       - setup:
           os: << parameters.os >>
       - run:
           name: Agent
-          command: npx nx-cloud start-agent
+          command: pnpm nx-cloud start-agent
           no_output_timeout: 60m
 
   # -------------------------
@@ -152,52 +159,48 @@ jobs:
   main-linux:
     executor: linux
     environment:
-      NX_CLOUD_DISTRIBUTED_EXECUTION: 'true'
-      NX_CLOUD_DISTRIBUTED_EXECUTION_AGENT_COUNT: 8
       NX_E2E_CI_CACHE_KEY: e2e-circleci-linux
       NX_VERBOSE_LOGGING: 'false'
+      NX_DAEMON: 'true'
+      NX_PERF_LOGGING: 'false'
+      NX_NATIVE_LOGGING: 'false'
     steps:
       - run:
           name: Set dynamic nx run variable
           command: |
-            echo "export NX_RUN_GROUP=\"run-group-linux-$CIRCLE_WORKFLOW_ID\";" >> $BASH_ENV
+            echo "export NX_CI_EXECUTION_ENV=\"linux\";" >> $BASH_ENV
       - setup:
           os: linux
       - nx/set-shas:
           main-branch-name: 'master'
-      - run: npx nx-cloud record yarn check-imports
-      - run: npx nx-cloud record yarn nx format:check --base=$NX_BASE --head=$NX_HEAD
-      - run: npx nx-cloud record yarn check-commit
-      - run: npx nx-cloud record yarn depcheck
+      - run: pnpm nx-cloud start-ci-run --stop-agents-after="e2e"
       - run:
           name: Check Documentation
-          command: npx nx-cloud record yarn documentation
+          command: pnpm nx documentation --no-dte
           no_output_timeout: 20m
       - run:
-          name: Run Lint/Test/Build
+          name: Run Checks/Lint/Test/Build
+          no_output_timeout: 60m
           command: |
             pids=()
 
-            npx nx-cloud record yarn nx workspace-lint &
+            pnpm nx-cloud record -- nx format:check --base=$NX_BASE --head=$NX_HEAD &
             pids+=($!)
-            yarn nx affected --target=lint --base=$NX_BASE --head=$NX_HEAD --parallel=3 &
+
+            pnpm nx run-many -t check-imports check-commit check-lock-files check-codeowners documentation --parallel=1 --no-dte &
             pids+=($!)
-            yarn nx affected --target=test --base=$NX_BASE --head=$NX_HEAD --parallel=1 &
+
+            pnpm nx affected --target=lint --base=$NX_BASE --head=$NX_HEAD --parallel=3 &
             pids+=($!)
-            yarn nx affected --target=build --base=$NX_BASE --head=$NX_HEAD --parallel=3 &
+            pnpm nx affected --target=test --base=$NX_BASE --head=$NX_HEAD --parallel=1 &
             pids+=($!)
+            (pnpm nx affected --target=build --base=$NX_BASE --head=$NX_HEAD --parallel=3 &&
+            pnpm nx affected --target=e2e --base=$NX_BASE --head=$NX_HEAD --parallel=1) &
+            pids+=($!)
+
             for pid in "${pids[@]}"; do
               wait "$pid"
             done
-      - run:
-          name: Run E2E Tests
-          command: |
-            npx nx affected --target=e2e --base=$NX_BASE --head=$NX_HEAD --exclude=e2e-storybook,e2e-storybook-angular,e2e-react-native,e2e-detox --parallel=1
-          no_output_timeout: 45m
-      - run:
-          name: Stop All Running Agents for This CI Run
-          command: npx nx-cloud stop-all-agents
-
   # -------------------------
   #     JOBS: Main-MacOS
   # -------------------------
@@ -205,38 +208,25 @@ jobs:
     executor: macos
     environment:
       NX_E2E_CI_CACHE_KEY: e2e-circleci-macos
+      NX_DAEMON: 'false' # TODO: set to true after #18410
+      NX_PERF_LOGGING: 'false'
+      SELECTED_PM: 'npm' # explicitly define npm for macOS tests
+      NX_SKIP_NX_CACHE: 'true' # TODO: Remove after #18410
     steps:
       - run:
           name: Set dynamic nx run variable
           command: |
-            echo "export NX_RUN_GROUP=\"run-group-macos-$CIRCLE_WORKFLOW_ID\";" >> $BASH_ENV
+            echo "export NX_CI_EXECUTION_ENV=\"macos\";" >> $BASH_ENV
       - setup:
           os: macos
+      - rust/install
       - nx/set-shas:
           main-branch-name: 'master'
       - run:
-          name: Check if "detox" or "react-native" were modified directly
+          name: Run E2E Tests for macOS
           command: |
-            COUNT=`git diff --name-only $NX_BASE $NX_HEAD | (grep -E 'packages/detox|packages/react-native|e2e/detox|e2e/react-native' || true) | wc -l`
-            if [[ $COUNT -gt 0 ]]; then
-              echo "React Native and Detox were touched directly"
-              echo "export E2E_AFFECTED=true;" >> $BASH_ENV
-            else
-              echo "React Native and Detox were not touched directly"
-              echo "export E2E_AFFECTED=false;" >> $BASH_ENV
-            fi
-      - run:
-          name: Run E2E Tests
-          command: |
-            if $E2E_AFFECTED; then
-              npx nx affected --target=e2e --base=$NX_BASE --head=$NX_HEAD --exclude=e2e-detox,e2e-js,e2e-next,e2e-workspace-create,e2e-nx-run,e2e-nx-misc,e2e-react,e2e-web,e2e-angular-extensions,e2e-angular-core,e2e-nx-plugin,e2e-cypress,e2e-node,e2e-linter,e2e-jest,e2e-add-nx-to-monorepo,nx-dev-e2e,e2e-nx-init,e2e-dep-graph-client --parallel=1;
-            else
-              echo "Skipping E2E tests";
-            fi
+            pnpm nx affected -t e2e-macos --parallel=1 --base=$NX_BASE --head=$NX_HEAD
           no_output_timeout: 45m
-      - run:
-          name: Stop All Running Agents for This CI Run
-          command: npx nx-cloud stop-all-agents
 
 # -------------------------
 #        WORKFLOWS(JOBS)

.cz-config.js

@@ -1,86 +0,0 @@
-module.exports = {
-  types: [
-    { value: 'feat', name: 'feat:     A new feature' },
-    { value: 'fix', name: 'fix:      A bug fix' },
-    { value: 'docs', name: 'docs:     Documentation only changes' },
-    {
-      value: 'cleanup',
-      name: 'cleanup:  A code change that neither fixes a bug nor adds a feature',
-    },
-    {
-      value: 'chore',
-      name: "chore:    Other changes that don't modify src or test files",
-    },
-  ],
-
-  scopes: [
-    { name: 'angular', description: 'anything Angular specific' },
-    { name: 'core', description: 'anything Nx core specific' },
-    { name: 'nxdev', description: 'anything related to docs infrastructure' },
-    { name: 'nextjs', description: 'anything Next specific' },
-    { name: 'nest', description: 'anything Nest specific' },
-    { name: 'node', description: 'anything Node specific' },
-    { name: 'js', description: 'anything TS->JS specific' },
-    { name: 'express', description: 'anything Express specific' },
-    { name: 'nx-plugin', description: 'anything Nx Plugin specific' },
-    { name: 'react', description: 'anything React specific' },
-    { name: 'react-native', description: 'anything React Native specific' },
-    { name: 'detox', description: 'anything Detox specific' },
-    { name: 'web', description: 'anything Web specific' },
-    { name: 'linter', description: 'anything Linter specific' },
-    { name: 'storybook', description: 'anything Storybook specific' },
-    { name: 'dep-graph', description: 'anything dep-graph app specific' },
-    {
-      name: 'testing',
-      description: 'anything testing specific (e.g., jest or cypress)',
-    },
-    {
-      name: 'repo',
-      description: 'anything related to managing the repo itself',
-    },
-    { name: 'misc', description: 'misc stuff' },
-    { name: 'devkit', description: 'devkit-related changes' },
-  ],
-
-  allowTicketNumber: true,
-  isTicketNumberRequired: false,
-  ticketNumberPrefix: 'TICKET-',
-  ticketNumberRegExp: '\\d{1,5}',
-
-  // it needs to match the value for field type. Eg.: 'fix'
-  /*
-  scopeOverrides: {
-    fix: [
-      {name: 'merge'},
-      {name: 'style'},
-      {name: 'e2eTest'},
-      {name: 'unitTest'}
-    ]
-  },
-  */
-  // override the messages, defaults are as follows
-  messages: {
-    type: "Select the type of change that you're committing:",
-    scope: '\nDenote the SCOPE of this change (optional):',
-    // used if allowCustomScopes is true
-    customScope: 'Denote the SCOPE of this change:',
-    subject:
-      'Write a SHORT, IMPERATIVE (lowercase) description of the change:\n',
-    body: 'Provide a LONGER description of the change (optional). Use "|" to break new line:\n',
-    breaking: 'List any BREAKING CHANGES (optional):\n',
-    footer:
-      'List any ISSUES CLOSED by this change (optional). E.g.: #31, #34:\n',
-    confirmCommit: 'Are you sure you want to proceed with the commit above?',
-  },
-
-  allowCustomScopes: false,
-  allowBreakingChanges: ['feat', 'fix'],
-  // skip any questions you want
-  skipQuestions: ['ticketNumber'],
-
-  // limit subject length
-  subjectLimit: 100,
-  // breaklineChar: '|', // It is supported for fields body and footer.
-  // footerPrefix : 'ISSUES CLOSED:'
-  // askForBreakingChangeFirst : true, // default is false
-};

.devcontainer/devcontainer.json

@@ -0,0 +1,28 @@
+// For format details, see https://aka.ms/devcontainer.json. For config options, see the
+// README at: https://github.com/devcontainers/templates/tree/main/src/typescript-node
+{
+  "name": "NxDevContainer",
+  // Or use a Dockerfile or Docker Compose file. More info: https://containers.dev/guide/dockerfile
+  "image": "mcr.microsoft.com/devcontainers/typescript-node:0-18",
+  "features": {
+    "ghcr.io/devcontainers/features/rust:1": {}
+  },
+
+  // Use 'forwardPorts' to make a list of ports inside the container available locally.
+  // 4211 = nx graph port
+  "forwardPorts": [4211],
+
+  // Use 'postCreateCommand' to run commands after the container is created.
+  "postCreateCommand": "pnpm install",
+  "customizations": {
+    "vscode": {
+      "extensions": ["nrwl.angular-console"]
+    }
+  }
+
+  // Configure tool-specific properties.
+  // "customizations": {},
+
+  // Uncomment to connect as root instead. More info: https://aka.ms/dev-containers-non-root.
+  // "remoteUser": "root"
+}

.editorconfig

@@ -0,0 +1,18 @@
+# EditorConfig is awesome: https://EditorConfig.org
+
+# top-most EditorConfig file
+root = true
+
+# Unix-style newlines with a newline ending every file
+[*]
+end_of_line = lf
+insert_final_newline = true
+
+# 4 space indentation
+[*.{js,ts,jsx,tsx}]
+indent_style = space
+indent_size = 2
+
+[package.json]
+indent_style = space
+indent_size = 2

.eslintignore

@@ -0,0 +1 @@
+node_modules

.eslintrc.json

@@ -5,17 +5,58 @@
     "node": true
   },
   "ignorePatterns": ["**/*.ts"],
-  "plugins": ["@typescript-eslint", "@nrwl/nx"],
-  "extends": [],
+  "plugins": ["@typescript-eslint", "@nx"],
+  "extends": ["plugin:storybook/recommended"],
   "rules": {
-    "@typescript-eslint/explicit-module-boundary-types": "off"
+    "@typescript-eslint/explicit-module-boundary-types": "off",
+    "no-restricted-imports": ["error", "create-nx-workspace"],
+    "@typescript-eslint/no-restricted-imports": [
+      "error",
+      {
+        "patterns": [
+          {
+            "group": ["nx/src/plugins/js*"],
+            "message": "Imports from 'nx/src/plugins/js' are not allowed. Use '@nx/js' instead"
+          }
+        ]
+      }
+    ],
+    "storybook/no-uninstalled-addons": [
+      "error",
+      {
+        "ignore": ["@nx/react/plugins/storybook"]
+      }
+    ]
   },
   "overrides": [
     {
-      "files": ["**/executors/**/schema.json", "**/generators/**/schema.json"],
+      "files": ["*.json"],
       "parser": "jsonc-eslint-parser",
+      "rules": {}
+    },
+    {
+      "files": ["**/executors/**/schema.json", "**/generators/**/schema.json"],
       "rules": {
-        "@nrwl/nx/workspace/valid-schema-description": "error"
+        "@nx/workspace/valid-schema-description": "error"
+      }
+    },
+    {
+      "files": ["*.ts", "*.tsx", "*.js", "*.jsx"],
+      "rules": {
+        "@nx/enforce-module-boundaries": [
+          "error",
+          {
+            "enforceBuildableLibDependency": true,
+            "checkDynamicDependenciesExceptions": [".*"],
+            "allow": [],
+            "depConstraints": [
+              {
+                "sourceTag": "*",
+                "onlyDependOnLibsWithTags": ["*"]
+              }
+            ]
+          }
+        ]
       }
     }
   ]

.github/ISSUE_TEMPLATE/1-bug.md

@@ -1,33 +0,0 @@
----
-name: "🐞 Bug Report"
-about: Report a bug
-labels: "type: bug"
-
----
-
-<!-- Please do your best to fill out all of the sections below! -->
-
-## Current Behavior
-<!-- What is the behavior that currently you experience? -->
-
-## Expected Behavior
-<!-- What is the behavior that you expect to happen? -->
-<!-- Is this a regression? .i.e Did this used to be the behavior at one point?  -->
-
-## Steps to Reproduce
-<!-- Help us help you by making it easy for us to reproduce your issue! -->
-
-<!-- Can you reproduce this on https://github.com/nrwl/nx-examples? -->
-<!-- If so, open a PR with your changes and link it below. -->
-<!-- If not, please provide a minimal Github repo -->
-<!-- At the very least, provide as much detail as possible to help us reproduce the issue -->
-
-<!-- Remove this line -->
-This issue may not be prioritized if details are not provided to help us reproduce the issue.
-
-### Failure Logs
-<!-- Please include any relevant log snippets or files here. -->
-
-### Environment
-<!-- It's important for us to know the context in which you experience this behavior! -->
-<!-- Please paste the result of `nx report` below! -->

.github/ISSUE_TEMPLATE/1-bug.yml

@@ -0,0 +1,75 @@
+name: 🐞 Bug Report
+description: This form is to report unexpected behavior in Nx.
+labels: [ "type: bug" ]
+body:
+  - type: markdown
+    attributes:
+      value: |
+        Thank you for taking your precious time to file an issue! 🙏 We are sorry for the inconvenience this issue has caused you and want to resolve it as soon as possible.
+
+        Help us help you! We know that your time is precious and hate to ask for any more of it, but the first step in fixing this issue is to understand the issue. Taking some extra time to ensure that we are able to reproduce the issue will help us significantly in resolving the issue.
+  - type: textarea
+    id: current-behavior
+    attributes:
+      label: Current Behavior
+      description: What is the behavior that currently you experience?
+    validations:
+      required: true
+  - type: textarea
+    id: expected-behavior
+    attributes:
+      label: Expected Behavior
+      description: What is the behavior that you expect to happen?
+    validations:
+      required: true
+  - type: input
+    id: repo
+    attributes:
+      label: GitHub Repo
+      description: |
+        This is extremely important! If this issue is reproduce-able on https://github.com/nrwl/nx-examples, you may use that as the repo.
+        If not, please do take a few minutes of your time to create a repo to help us reproduce the issue.
+        This is the best way to help us reproduce the issue and fix it as soon as possible.
+  - type: textarea
+    id: reproduction
+    attributes:
+      label: Steps to Reproduce
+      description: Please provide some instructions to reproduce the issue in the repo provided above. Be as detailed as possible.
+      value: |
+        1.
+    validations:
+      required: true
+  - type: textarea
+    id: nx-report
+    attributes:
+      label: Nx Report
+      description: Please paste the contents shown by `nx report`. This will be automatically formatted into code, so no need for backticks.
+      render: shell
+    validations:
+      required: true
+  - type: textarea
+    id: logs
+    attributes:
+      label: Failure Logs
+      description: Please include any relevant log snippets or files here. This will be automatically formatted into code, so no need for backticks.
+      render: shell
+  - type: checkboxes
+    id: os
+    attributes:
+      label: Operating System
+      description: What Operating System are you using?
+      options:
+        - label: macOS
+        - label: Linux
+        - label: Windows
+        - label: Other (Please specify)
+  - type: textarea
+    id: additional
+    attributes:
+      label: Additional Information
+      description: Is there any additional information that you can provide?
+  - type: markdown
+    id: disclaimer
+    attributes:
+      value: |
+        > If we are not able to reproduce the issue, we will likely prioritize fixing other issues we can reproduce. Please do your best to fill out all of the sections above.

.github/PULL_REQUEST_TEMPLATE/COMMUNITY_PLUGIN.MD

@@ -1,9 +1,31 @@
+<!-- 
 _[Please make sure you have read the submission guidelines before posting an PR](https://github.com/nrwl/nx/blob/master/CONTRIBUTING.md#submit-pr)_
 
 # Community Plugin Submission
 
 Thanks for submitting your Nx Plugin to our community plugins list. Make sure to follow these steps to ensure that your PR is approved in a timely manner.
 
+## Plugin Requirements
+
+Before you submit your plugin to be listed in our registry, it needs to meet the following requirements:
+- Run some kind of automated e2e tests in your repository
+- Include `@nx/devkit` as a `dependency` in the plugin's `package.json`
+- List a `repository.url` in the plugin's `package.json`
+
+i.e.
+
+```
+{
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/nrwl/nx.git",
+    "directory": "packages/web"
+  }
+}
+```
+
+Note: We reserve the right to remove unmaintained plugins from the registry.  If the plugins become maintained again, they can be resubmitted to the registry.
+
 ## Steps to Submit Your Plugin
 - Use the following commit message template: `chore(core): nx plugin submission [PLUGIN_NAME]`
 - Update the `community/approved-plugins.json` file with a new entry for your plugin that includes `name`, `url`, `description`:
@@ -20,4 +42,15 @@ Example:
 }]
 ```
 
-Once merged, your will plugin will be available when running the `nx list` command, and will also be available in the Plugin browser on [nx.dev](https://nx.dev)
+Once merged, your plugin will be available when running the `nx list` command, and will also be available in the Plugin Registry on [nx.dev](https://nx.dev/extending-nx/registry)
+-->
+
+# Community Plugin Submission
+
+## {replace with plugin's name}
+
+<!-- 
+Describe what your plugin is and what is its goal or issues it addresses.  If you don't provide a description, we will not merge your PR.
+Is it focused on a technology, tooling or behaviour? Does the plugin provide generators, executors or graph support?
+Do you know who is already using the plugin? Mention who is the author of the plugin.
+-->

.github/workflows/do-not-merge.yml

@@ -0,0 +1,21 @@
+name: Unmergable Labels Check
+
+on:
+  pull_request:
+    types: [synchronize, opened, reopened, labeled, unlabeled]
+
+jobs:
+  do-not-merge:
+    if: ${{ github.repository_owner == 'nrwl' }}
+    name: Prevent Merging
+    runs-on: ubuntu-latest
+    steps:
+      - name: Check for label
+        run: |
+          echo "${{ toJSON(github.event.*.labels.*.name) }}"
+          node -e 'const forbidden = ["target: next major version", "pr status: needs tests", "pr status: in-progress", "blocked: needs rebase", "pr status: do not merge"];
+           const match = ${{ toJSON(github.event.*.labels.*.name) }}.find(l => forbidden.includes(l.toLowerCase()));
+           if (match) {
+            console.log("Cannot merge PRs that are labeled with " + match);
+            process.exit(1)
+           }'

.github/workflows/e2e-matrix.yml

@@ -6,115 +6,344 @@ on:
   workflow_dispatch:
     inputs:
       debug_enabled:
+        type: boolean
         description: 'Run the build with tmate debugging enabled (https://github.com/marketplace/actions/debugging-with-tmate)'
         required: false
         default: false
 
+env:
+  CYPRESS_CACHE_FOLDER: ${{ github.workspace }}/.cypress
+
+permissions: {}
 jobs:
-  e2e:
+  preinstall:
     runs-on: ${{ matrix.os }}
     strategy:
       matrix:
         os:
           - ubuntu-latest
           - macos-latest
-        include:
-          - os: ubuntu-latest
-            os-name: ubuntu
-            os-cache-dir: /tmp/nx-cache
-          - os: macos-latest
-            os-name: osx
-            os-cache-dir: /tmp/nx-cache
         node_version:
-          - '16'
+          - 19
+          - 18
+          - 16
+        exclude:
+          # run just node v18 on macos
+          - os: macos-latest
+            node_version: 19
+          - os: macos-latest
+            node_version: 16
+
+    name: Cache install (${{ matrix.os }}, node v${{ matrix.node_version }})
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3
+
+      - name: Install PNPM
+        run: |
+          npm install -g @pnpm/exe@8.3.1
+
+      - name: Set node
+        uses: actions/setup-node@v3
+        with:
+          node-version: ${{ matrix.node_version }}
+          cache: 'pnpm'
+
+      - name: Cache node_modules
+        id: cache-modules
+        uses: actions/cache@v3
+        with:
+          lookup-only: true
+          path: '**/node_modules'
+          key: ${{ runner.os }}-modules-${{ matrix.node_version }}-${{ github.run_id }}
+
+      - name: Install packages
+        if: steps.cache-modules.outputs.cache-hit != 'true'
+        run: pnpm install --frozen-lockfile
+
+      - name: Homebrew cache directory path
+        if: ${{ matrix.os == 'macos-latest' }}
+        id: homebrew-cache-dir-path
+        run: echo "dir=$(brew --cache)" >> $GITHUB_OUTPUT
+
+      - name: Cache Homebrew
+        if: ${{ matrix.os == 'macos-latest' }}
+        uses: actions/cache@v3
+        with:
+          lookup-only: true
+          path: ${{ steps.homebrew-cache-dir-path.outputs.dir }}
+          key: brew-${{ matrix.node_version }}
+          restore-keys: |
+            brew-
+
+      - name: Cache Cypress
+        id: cache-cypress
+        uses: actions/cache@v3
+        with:
+          lookup-only: true
+          path: '${{ github.workspace }}/.cypress'
+          key: ${{ runner.os }}-cypress
+
+      - name: Install Cypress
+        if: steps.cache-cypress.outputs.cache-hit != 'true'
+        run: npx cypress install
+
+  e2e:
+    needs: preinstall
+    permissions:
+      contents: read
+    runs-on: ${{ matrix.os }}
+    timeout-minutes: 90
+    strategy:
+      matrix:
+        os:
+          - ubuntu-latest
+          - macos-latest
+        node_version:
+          - 19
+          - 18
+          - 16
         package_manager:
           - npm
           - yarn
           - pnpm
-        packages:
-          - e2e-angular-core,e2e-angular-extensions
-          - e2e-nx-run,e2e-nx-misc,e2e-nx-plugin,e2e-jest,e2e-linter
+        project:
+          - e2e-angular-core
+          - e2e-angular-extensions
           - e2e-cypress
-          - e2e-react
+          - e2e-detox
+          - e2e-esbuild
+          - e2e-expo
+          - e2e-jest
+          - e2e-js
+          - e2e-lerna-smoke-tests
+          - e2e-linter
           - e2e-next
           - e2e-node
+          - e2e-nx-init
+          - e2e-nx-misc
+          - e2e-nx-plugin
+          - e2e-nx-run
+          - e2e-react-core
+          - e2e-react-extensions
+          - e2e-react-native
           - e2e-web
+          - e2e-rollup
           - e2e-storybook
           - e2e-storybook-angular
+          - e2e-vite
+          - e2e-webpack
           - e2e-workspace-create
-          - e2e-react-native
-          # - e2e-detox
-          - e2e-add-nx-to-monorepo
-          - e2e-dep-graph-client
-        exclude:
-          # exclude react-native and detox from ubuntu
+          - e2e-workspace-create-npm
+        include:
+          # os short names
           - os: ubuntu-latest
-            packages: e2e-react-native
-          # - os: ubuntu-latest
-          #   packages: e2e-detox
-          # run just npm on macos
+            os_name: 'Linux'
+          - os: macos-latest
+            os_name: 'MacOS'
+          # test timeouts
+          - os: ubuntu-latest
+            os_timeout: 60
+          - os: macos-latest
+            os_timeout: 90
+          # codeowner groups
+          - project: e2e-angular-core
+            codeowners: 'S04SS457V38'
+          - project: e2e-angular-extensions
+            codeowners: 'S04SS457V38'
+          - project: e2e-cypress
+            codeowners: 'S04T16BTJJY'
+          - project: e2e-detox
+            codeowners: 'S04TNCNJG5N'
+          - project: e2e-esbuild
+            codeowners: 'S04SJ6HHP0X'
+          - project: e2e-expo
+            codeowners: 'S04TNCNJG5N'
+          - project: e2e-jest
+            codeowners: 'S04T16BTJJY'
+          - project: e2e-js
+            codeowners: 'S04SJ6HHP0X'
+          - project: e2e-lerna-smoke-tests
+            codeowners: 'S04TNCVEETS'
+          - project: e2e-linter
+            codeowners: 'S04SYJGKSCT'
+          - project: e2e-next
+            codeowners: 'S04TNCNJG5N'
+          - project: e2e-node
+            codeowners: 'S04SJ6HHP0X'
+          - project: e2e-nx-init
+            codeowners: 'S04SYHYKGNP'
+          - project: e2e-nx-misc
+            codeowners: 'S04SYHYKGNP'
+          - project: e2e-nx-plugin
+            codeowners: 'S04SYHYKGNP'
+          - project: e2e-nx-run
+            codeowners: 'S04SYHYKGNP'
+          - project: e2e-react-core
+            codeowners: 'S04TNCNJG5N'
+          - project: e2e-react-extensions
+            codeowners: 'S04TNCNJG5N'
+          - project: e2e-react-native
+            codeowners: 'S04TNCNJG5N'
+          - project: e2e-web
+            codeowners: 'S04SJ6PL98X'
+          - project: e2e-rollup
+            codeowners: 'S04SJ6PL98X'
+          - project: e2e-storybook
+            codeowners: 'S04SVQ8H0G5'
+          - project: e2e-storybook-angular
+            codeowners: 'S04SVQ8H0G5'
+          - project: e2e-vite
+            codeowners: 'S04SJ6PL98X'
+          - project: e2e-webpack
+            codeowners: 'S04SJ6PL98X'
+          - project: e2e-workspace-create
+            codeowners: 'S04SYHYKGNP'
+          - project: e2e-workspace-create-npm
+            codeowners: 'S04SYHYKGNP'
+        exclude:
+          # exclude react-native tests from ubuntu
+          - os: ubuntu-latest
+            project: e2e-react-native
+          - os: ubuntu-latest
+            project: e2e-detox
+          - os: ubuntu-latest
+            project: e2e-expo
+          # exclude non-CNW/Lerna tests from non-LTS node versions
+          - node_version: 16
+            project: e2e-angular-core
+          - node_version: 16
+            project: e2e-angular-extensions
+          - node_version: 16
+            project: e2e-cypress
+          - node_version: 16
+            project: e2e-detox
+          - node_version: 16
+            project: e2e-esbuild
+          - node_version: 16
+            project: e2e-expo
+          - node_version: 16
+            project: e2e-jest
+          - node_version: 16
+            project: e2e-js
+          - node_version: 16
+            project: e2e-linter
+          - node_version: 16
+            project: e2e-next
+          - node_version: 16
+            project: e2e-node
+          - node_version: 16
+            project: e2e-nx-init
+          - node_version: 16
+            project: e2e-nx-misc
+          - node_version: 16
+            project: e2e-nx-plugin
+          - node_version: 16
+            project: e2e-lerna-smoke-tests
+          - node_version: 16
+            project: e2e-react-core
+          - node_version: 16
+            project: e2e-react-extensions
+          - node_version: 16
+            project: e2e-react-native
+          - node_version: 16
+            project: e2e-web
+          - node_version: 16
+            project: e2e-rollup
+          - node_version: 16
+            project: e2e-storybook
+          - node_version: 16
+            project: e2e-storybook-angular
+          - node_version: 16
+            project: e2e-vite
+          - node_version: 16
+            project: e2e-webpack
+          - node_version: 19
+            project: e2e-angular-core
+          - node_version: 19
+            project: e2e-angular-extensions
+          - node_version: 19
+            project: e2e-cypress
+          - node_version: 19
+            project: e2e-detox
+          - node_version: 19
+            project: e2e-esbuild
+          - node_version: 19
+            project: e2e-expo
+          - node_version: 19
+            project: e2e-jest
+          - node_version: 19
+            project: e2e-js
+          - node_version: 19
+            project: e2e-linter
+          - node_version: 19
+            project: e2e-next
+          - node_version: 19
+            project: e2e-node
+          - node_version: 19
+            project: e2e-nx-init
+          - node_version: 19
+            project: e2e-nx-misc
+          - node_version: 19
+            project: e2e-nx-plugin
+          - node_version: 19
+            project: e2e-lerna-smoke-tests
+          - node_version: 19
+            project: e2e-react-core
+          - node_version: 19
+            project: e2e-react-extensions
+          - node_version: 19
+            project: e2e-react-native
+          - node_version: 19
+            project: e2e-web
+          - node_version: 19
+            project: e2e-rollup
+          - node_version: 19
+            project: e2e-storybook
+          - node_version: 19
+            project: e2e-storybook-angular
+          - node_version: 19
+            project: e2e-vite
+          - node_version: 19
+            project: e2e-webpack
+          # run just npm v18 on macos
           - os: macos-latest
             package_manager: yarn
           - os: macos-latest
             package_manager: pnpm
-          # exclude everything but react-native and detox from macos
           - os: macos-latest
-            packages: e2e-angular-core,e2e-angular-extensions
+            node_version: 16
           - os: macos-latest
-            packages: e2e-nx-run,e2e-nx-misc,e2e-nx-plugin,e2e-jest,e2e-linter
-          - os: macos-latest
-            packages: e2e-cypress
-          - os: macos-latest
-            packages: e2e-react
-          - os: macos-latest
-            packages: e2e-next
-          - os: macos-latest
-            packages: e2e-node
-          - os: macos-latest
-            packages: e2e-web
-          - os: macos-latest
-            packages: e2e-storybook,e2e-storybook-angular
-          - os: macos-latest
-            packages: e2e-workspace-create
-          - os: macos-latest
-            packages: e2e-add-nx-to-monorepo
-          - os: macos-latest
-            packages: e2e-dep-graph-client
+            node_version: 19
       fail-fast: false
 
-    name: ${{ matrix.os-name }}/${{ matrix.package_manager }} - ${{ matrix.packages }}
+    name: ${{ matrix.os_name }}/${{ matrix.package_manager }}/${{ matrix.node_version }} ${{ join(matrix.project) }}
     steps:
       - name: Checkout
-        uses: actions/checkout@v2
-        with:
-          fetch-depth: 0
+        uses: actions/checkout@v3
+
+      - name: Prepare dir for output
+        run: mkdir -p outputs
 
       - name: Install PNPM
-        if: ${{ matrix.package_manager == 'pnpm' }}
-        uses: pnpm/action-setup@v2.2.1
-        with:
-          version: 7.1.0
+        run: |
+          npm install -g @pnpm/exe@8.3.1
 
       - name: Use Node.js ${{ matrix.node_version }}
-        uses: actions/setup-node@v2.4.0
+        uses: actions/setup-node@v3
         with:
           node-version: ${{ matrix.node_version }}
-          registry-url: http://localhost:4872
+          cache: 'pnpm'
 
-      - name: Yarn cache directory path
-        id: yarn-cache-dir-path
-        run: echo "::set-output name=dir::$(yarn cache dir)"
-
-      - name: Cache yarn
-        uses: actions/cache@v2
+      - name: Cache node_modules
+        id: cache-modules
+        uses: actions/cache@v3
         with:
-          path: ${{ steps.yarn-cache-dir-path.outputs.dir }}
-          key: ${{ matrix.os }}-node-${{ matrix.node_version }}-yarn-${{ hashFiles('yarn.lock') }}
-          restore-keys: |
-            ${{ matrix.os }}-node-${{ matrix.node_version }}-yarn-
+          path: '**/node_modules'
+          key: ${{ runner.os }}-modules-${{ matrix.node_version }}-${{ github.run_id }}
 
       - name: Install packages
-        run: yarn install --prefer-offline --frozen-lockfile --non-interactive
+        run: pnpm install --frozen-lockfile
 
       - name: Cleanup
         if: ${{ matrix.os == 'ubuntu-latest' }}
@@ -131,17 +360,28 @@ jobs:
       - name: Homebrew cache directory path
         if: ${{ matrix.os == 'macos-latest' }}
         id: homebrew-cache-dir-path
-        run: echo "::set-output name=dir::$(brew --cache)"
+        run: echo "dir=$(brew --cache)" >> $GITHUB_OUTPUT
 
       - name: Cache Homebrew
         if: ${{ matrix.os == 'macos-latest' }}
-        uses: actions/cache@v2
+        uses: actions/cache@v3
         with:
           path: ${{ steps.homebrew-cache-dir-path.outputs.dir }}
           key: brew-${{ matrix.node_version }}
           restore-keys: |
             brew-
 
+      - name: Cache Cypress
+        id: cache-cypress
+        uses: actions/cache@v3
+        with:
+          path: '${{ github.workspace }}/.cypress'
+          key: ${{ runner.os }}-cypress
+
+      - name: Install Cypress
+        if: steps.cache-cypress.outputs.cache-hit != 'true'
+        run: npx cypress install
+
       - name: Install applesimutils, reset ios simulators
         if: ${{ matrix.os == 'macos-latest' }}
         run: |
@@ -149,59 +389,279 @@ jobs:
           HOMEBREW_NO_AUTO_UPDATE=1 brew install applesimutils >/dev/null
           xcrun simctl shutdown all && xcrun simctl erase all
 
+      - name: Configure git metadata (needed for lerna smoke tests)
+        run: |
+          git config --global user.email test@test.com
+          git config --global user.name "Test Test"
+
+      - name: Set starting timestamp
+        id: before-e2e
+        run: |
+          echo "timestamp=$(date +%s)" >> $GITHUB_OUTPUT
+
       - name: Run e2e tests
-        run: yarn nx run-many --target=e2e --projects="${{ join(matrix.packages) }}" --parallel=1
+        id: e2e-run
+        run: pnpm nx run-many -t e2e,e2e-macos -p ${{ matrix.project }}
+        timeout-minutes: ${{ matrix.os_timeout }}
         env:
           GIT_AUTHOR_EMAIL: test@test.com
           GIT_AUTHOR_NAME: Test
           GIT_COMMITTER_EMAIL: test@test.com
           GIT_COMMITTER_NAME: Test
           NX_E2E_CI_CACHE_KEY: e2e-gha-${{ matrix.os }}-${{ matrix.node_version }}-${{ matrix.package_manager }}
-          NX_E2E_RUN_CYPRESS: ${{ 'true' }}
           NODE_OPTIONS: --max_old_space_size=8192
           SELECTED_PM: ${{ matrix.package_manager }}
           npm_config_registry: http://localhost:4872
           YARN_REGISTRY: http://localhost:4872
-          NX_VERBOSE_LOGGING: ${{ 'true' }}
-          NX_E2E_SKIP_BUILD_CLEANUP: ${{ 'true' }}
-          NX_CACHE_DIRECTORY: ${{ matrix.os-cache-dir }}
+          NX_CACHE_DIRECTORY: 'tmp'
+          NX_E2E_SKIP_BUILD_CLEANUP: 'true'
+          NX_E2E_RUN_E2E: 'true'
+          NX_E2E_VERBOSE_LOGGING: 'true'
+          NX_PERF_LOGGING: 'false'
+          NX_DAEMON: 'true'
+
+      - name: Save matrix config in file
+        if: ${{ always() }}
+        id: save-matrix
+        shell: bash
+        run: |
+          before=${{ steps.before-e2e.outputs.timestamp }}
+          now=$(date +%s)
+          delta=$(($now - $before))
+          matrix=$((
+            echo '${{ toJSON(matrix) }}'
+          ) | jq --argjson delta $delta -c '. + { "status": "${{ steps.e2e-run.outcome}}", "duration": $delta }')
+          echo "$matrix" > matrix
+          path=outputs/${{ matrix.os_name}}-${{ matrix.node_version}}-${{ matrix.package_manager}}-${{ matrix.project }}
+          echo "path=$path" >> $GITHUB_OUTPUT
+          echo "$matrix" > $path
+
+      - name: Upload matrix config
+        uses: actions/upload-artifact@v3
+        if: ${{ always() }}
+        with:
+          name: outputs
+          path: ${{ steps.save-matrix.outputs.path }}
 
       - name: Setup tmate session
-        if: ${{ github.event_name == 'workflow_dispatch' && github.event.inputs.debug_enabled && failure() }}
+        if: ${{ github.event_name == 'workflow_dispatch' && inputs.debug_enabled && failure() }}
         uses: mxschmitt/action-tmate@v3.8
+        timeout-minutes: 15
 
-  report-success:
-    if: ${{ github.repository_owner == 'nrwl' && github.event_name == 'workflow_dispatch' }} # only once it's fixed on manual dispatch
-    needs: e2e
+  process-result:
+    if: ${{ always() }}
     runs-on: ubuntu-latest
-    name: Report success
+    needs: e2e
+    outputs:
+      message: ${{ steps.process-json.outputs.SLACK_MESSAGE }}
+      proj-duration: ${{ steps.process-json.outputs.SLACK_PROJ_DURATION }}
+      pm-duration: ${{ steps.process-json.outputs.SLACK_PM_DURATION }}
+      codeowners: ${{ steps.process-json.outputs.CODEOWNERS }}
+    steps:
+      - name: Load outputs
+        uses: actions/download-artifact@v3
+        with:
+          name: outputs
+          path: outputs
+
+      - name: Join and stringify matrix configs
+        id: combine-json
+        run: |
+          combined=$((jq -s . outputs/*) | jq tostring)
+          echo "combined=$combined" >> $GITHUB_OUTPUT
+
+      - name: Make slack outputs
+        id: process-json
+        uses: actions/github-script@v6
+        env:
+          GITHUB_TOKEN: ${{ github.token }}
+        with:
+          script: |
+            const combined = JSON.parse(${{ steps.combine-json.outputs.combined }});
+            const failedProjects = combined.filter(c => c.status === 'failure').sort((a, b) => a.project.localeCompare(b.project));
+
+            // codeowners
+            const codeowners = new Set();
+            failedProjects.forEach(c => {
+              codeowners.add(c.codeowners);
+            });
+            core.setOutput('CODEOWNERS', Array.from(codeowners).join(','));
+
+            function trimSpace(res) {
+              return res.split('\n').map((l) => l.trim()).join('\n');
+            }
+
+            // failed message
+            let lastProject;
+            let result = `
+              \`\`\`
+              | Failed project                 | PM   | OS    | Node |
+              |--------------------------------|------|-------|------|`;
+            failedProjects.forEach(matrix => {
+              const project = matrix.project !== lastProject ? matrix.project : '...';
+              result += `\n| ${project.padEnd(30)} | ${matrix.package_manager.padEnd(4)} | ${matrix.os_name} | v${matrix.node_version.toString().padEnd(3)} |`
+              lastProject = matrix.project;
+            });
+            result += `\`\`\``;
+            core.setOutput('SLACK_MESSAGE', trimSpace(result));
+
+            function humanizeDuration(num) {
+              let res = '';
+              const hours = Math.floor(num / 3600);
+              if (hours) {
+                res += `${hours}h `;
+              }
+              const mins = Math.floor((num % 3600) / 60);
+              if (mins) {
+                res += `${mins}m `;
+              }
+              const sec = num % 60;
+              if (sec) {
+                res += `${sec}s`
+              }
+              return res;
+            }
+
+            // duration message
+            const timeReport = {};
+            const pmReport = {
+              npm: 0,
+              yarn: 0,
+              pnpm: 0
+            };
+            const macosProjects = ['e2e-detox', 'e2e-expo', 'e2e-react-native'];
+            combined.forEach((matrix) => {
+              if (matrix.os_name === 'Linux' && matrix.node_version === 18) {
+                pmReport[matrix.package_manager] += matrix.duration;
+              }
+              if (matrix.os_name === 'Linux' || macosProjects.includes(matrix.project)) {
+                if (timeReport[matrix.project]) {
+                  if (matrix.duration > timeReport[matrix.project].max) {
+                    timeReport[matrix.project].max = matrix.duration;
+                    timeReport[
+                      matrix.project
+                    ].maxEnv = `${matrix.os_name}, ${matrix.package_manager}`;
+                  }
+                  if (matrix.duration < timeReport[matrix.project].min) {
+                    timeReport[matrix.project].min = matrix.duration;
+                    timeReport[
+                      matrix.project
+                    ].minEnv = `${matrix.os_name}, ${matrix.package_manager}`;
+                  }
+                } else {
+                  timeReport[matrix.project] = {
+                    min: matrix.duration,
+                    max: matrix.duration,
+                    minEnv: `${matrix.os_name}, ${matrix.package_manager}`,
+                    maxEnv: `${matrix.os_name}, ${matrix.package_manager}`,
+                  };
+                }
+              }
+            });
+
+            // project time report
+            let resultPkg = `
+                \`\`\`
+                | Project                        | Time                      |
+                |--------------------------------|---------------------------|`;
+            function mapProjectTime(proj, section) {
+              let res = '';
+              res += `${humanizeDuration(timeReport[proj][section])}`;
+              res += ` (${timeReport[proj][section + 'Env']})`
+              return res;
+            }
+            function durationIcon(proj, section) {
+              if (timeReport[proj][section] < 12 * 60) {
+                return `${section} ✅`;
+              }
+              if (timeReport[proj][section] < 15 * 60) {
+                return `${section} ❗`;
+              }
+              return `${section} ❌`;
+            }
+            Object.keys(timeReport).forEach(proj => {
+              resultPkg += `\n| ${proj.padEnd(30)} |                           |`;
+              resultPkg += `\n| ${durationIcon(proj, 'min').padStart(29)} | ${mapProjectTime(proj, 'min').padEnd(25)} |`;
+              resultPkg += `\n| ${durationIcon(proj, 'max').padStart(29)} | ${mapProjectTime(proj, 'max').padEnd(25)} |`;
+            });
+            resultPkg += `\`\`\``;
+            core.setOutput('SLACK_PROJ_DURATION', trimSpace(resultPkg));
+
+            // Print project duration report inline to allow reviewing on manual runs (when no slack message will be sent)
+            console.log(trimSpace(resultPkg));
+
+            let resultPm = `
+                \`\`\`
+                | PM   | Total time  |
+                |------|-------------|`;
+            Object.keys(pmReport).forEach(pm => {
+              resultPm += `\n| ${pm.padEnd(4)} | ${humanizeDuration(pmReport[pm]).padEnd(11)} |`
+            });
+            resultPm += `\`\`\``;
+            core.setOutput('SLACK_PM_DURATION', trimSpace(resultPm));
+
+            // Print package manager duration report inline to allow reviewing on manual runs (when no slack message will be sent)
+            console.log(trimSpace(resultPm));
+
+  report-failure:
+    if: ${{ failure() && github.repository_owner == 'nrwl' && github.event_name != 'workflow_dispatch' }}
+    needs: process-result
+    runs-on: ubuntu-latest
+    name: Report failure
     steps:
       - name: Send notification
-        uses: ravsamhq/notify-slack-action@v1
+        uses: ravsamhq/notify-slack-action@v2
         with:
-          status: ${{ needs.e2e.result }}
-          message_format: '{emoji} *{workflow}* {status_message} (last commit <{commit_url}|{commit_sha}>)'
-          notification_title: '{workflow} has {status_message}'
-          footer: '<{run_url}|View Run>'
-          mention_users: 'U01UELKLYF2,U9NPA6C90'
-          mention_users_when: 'failure,warnings'
+          status: 'failure'
+          message_format: '{emoji} Workflow has {status_message} ${{ needs.process-result.outputs.message }}'
+          notification_title: '{workflow}'
+          footer: '<{run_url}|View Run> / Last commit <{commit_url}|{commit_sha}>'
+          mention_groups: ${{ needs.process-result.outputs.codeowners }}
         env:
           SLACK_WEBHOOK_URL: ${{ secrets.ACTION_MONITORING_SLACK }}
 
-  report:
-    if: ${{ always() && github.repository_owner == 'nrwl' && github.event_name != 'workflow_dispatch' }}
+  report-success:
+    if: ${{ success() && github.repository_owner == 'nrwl' && github.event_name != 'workflow_dispatch' }}
     needs: e2e
     runs-on: ubuntu-latest
     name: Report status
     steps:
       - name: Send notification
-        uses: ravsamhq/notify-slack-action@v1
+        uses: ravsamhq/notify-slack-action@v2
         with:
           status: ${{ needs.e2e.result }}
-          message_format: '{emoji} *{workflow}* {status_message} (last commit <{commit_url}|{commit_sha}>)'
-          notification_title: '{workflow} has {status_message}'
-          footer: '<{run_url}|View Run>'
-          mention_users: 'U01UELKLYF2,U9NPA6C90'
-          mention_users_when: 'failure,warnings'
+          message_format: '{emoji} Workflow has {status_message}'
+          notification_title: '{workflow}'
+          footer: '<{run_url}|View Run> / Last commit <{commit_url}|{commit_sha}>'
+        env:
+          SLACK_WEBHOOK_URL: ${{ secrets.ACTION_MONITORING_SLACK }}
+
+  report-pm-time:
+    if: ${{ always() && github.repository_owner == 'nrwl' && github.event_name != 'workflow_dispatch' }}
+    needs: process-result
+    runs-on: ubuntu-latest
+    name: Report duration per package manager
+    steps:
+      - name: Send notification
+        uses: ravsamhq/notify-slack-action@v2
+        with:
+          status: 'skipped'
+          message_format: '${{ needs.process-result.outputs.pm-duration }}'
+          notification_title: 'Total duration per package manager (ubuntu only)'
+        env:
+          SLACK_WEBHOOK_URL: ${{ secrets.ACTION_MONITORING_SLACK }}
+
+  report-proj-time:
+    if: ${{ always() && github.repository_owner == 'nrwl' && github.event_name != 'workflow_dispatch' }}
+    needs: process-result
+    runs-on: ubuntu-latest
+    name: Report duration per package manager
+    steps:
+      - name: Send notification
+        uses: ravsamhq/notify-slack-action@v2
+        with:
+          status: 'skipped'
+          message_format: '${{ needs.process-result.outputs.proj-duration }}'
+          notification_title: 'E2E Project duration stats'
         env:
           SLACK_WEBHOOK_URL: ${{ secrets.ACTION_MONITORING_SLACK }}

.github/workflows/e2e-windows.yml

@@ -6,117 +6,416 @@ on:
   workflow_dispatch:
     inputs:
       debug_enabled:
+        type: boolean
         description: 'Run the build with tmate debugging enabled (https://github.com/marketplace/actions/debugging-with-tmate)'
         required: false
         default: false
 
+env:
+  CYPRESS_CACHE_FOLDER: ${{ github.workspace }}/.cypress
+
+permissions: {}
 jobs:
-  e2e:
+  preinstall:
     runs-on: windows-latest
     strategy:
       matrix:
         node_version:
-          - '16'
+          - 19
+          - 18
+          - 16
+
+    name: Cache install (node v${{ matrix.node_version }})
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3
+
+      - uses: pnpm/action-setup@v2
+        name: Install pnpm
+        with:
+          version: 8.3.1
+          run_install: false
+
+      - name: Set node
+        uses: actions/setup-node@v3
+        with:
+          node-version: ${{ matrix.node_version }}
+          cache: 'pnpm'
+
+      - name: Cache node_modules
+        id: cache-modules
+        uses: actions/cache@v3
+        with:
+          lookup-only: true
+          path: '**/node_modules'
+          key: ${{ runner.os }}-modules-${{ matrix.node_version }}-${{ github.run_id }}
+
+      - name: Install packages
+        run: pnpm install --frozen-lockfile
+
+      - name: Cache Cypress
+        id: cache-cypress
+        uses: actions/cache@v3
+        with:
+          lookup-only: true
+          path: '${{ github.workspace }}/.cypress'
+          key: windows-cypress
+
+      - name: Install Cypress
+        if: steps.cache-cypress.outputs.cache-hit != 'true'
+        run: npx cypress install
+
+  e2e:
+    needs: preinstall
+    permissions:
+      contents: read
+    runs-on: windows-latest
+    strategy:
+      matrix:
+        node_version:
+          - 19
+          - 18
+          - 16
         package_manager:
           - npm
-        packages:
-          - e2e-angular-core,e2e-angular-extensions
-          - e2e-nx-run,e2e-nx-misc,e2e-nx-plugin,e2e-jest,e2e-linter
+        project:
+          - e2e-angular-core
+          - e2e-angular-extensions
           - e2e-cypress
-          - e2e-react
+          - e2e-esbuild
+          - e2e-jest
+          - e2e-js
+          - e2e-lerna-smoke-tests
+          - e2e-linter
           - e2e-next
           - e2e-node
+          - e2e-nx-init
+          - e2e-nx-misc
+          - e2e-plugin
+          - e2e-nx-run
+          - e2e-react-core
+          - e2e-react-extensions
           - e2e-web
-          - e2e-storybook,e2e-storybook-angular
+          - e2e-rollup
+          - e2e-storybook
+          - e2e-storybook-angular
+          - e2e-vite
+          - e2e-webpack
           - e2e-workspace-create
-          - e2e-add-nx-to-monorepo
-          # - e2e-dep-graph-client
+          - e2e-workspace-create-npm
+        include:
+          # codeowner groups
+          - project: e2e-angular-core
+            codeowners: 'S04SS457V38'
+          - project: e2e-angular-extensions
+            codeowners: 'S04SS457V38'
+          - project: e2e-cypress
+            codeowners: 'S04T16BTJJY'
+          - project: e2e-esbuild
+            codeowners: 'S04SJ6HHP0X'
+          - project: e2e-jest
+            codeowners: 'S04T16BTJJY'
+          - project: e2e-js
+            codeowners: 'S04SJ6HHP0X'
+          - project: e2e-lerna-smoke-tests
+            codeowners: 'S04TNCVEETS'
+          - project: e2e-linter
+            codeowners: 'S04SYJGKSCT'
+          - project: e2e-next
+            codeowners: 'S04TNCNJG5N'
+          - project: e2e-node
+            codeowners: 'S04SJ6HHP0X'
+          - project: e2e-nx-init
+            codeowners: 'S04SYHYKGNP'
+          - project: e2e-nx-misc
+            codeowners: 'S04SYHYKGNP'
+          - project: e2e-plugin
+            codeowners: 'S04SYHYKGNP'
+          - project: e2e-nx-run
+            codeowners: 'S04SYHYKGNP'
+          - project: e2e-react-core
+            codeowners: 'S04TNCNJG5N'
+          - project: e2e-react-extensions
+            codeowners: 'S04TNCNJG5N'
+          - project: e2e-web
+            codeowners: 'S04SJ6PL98X'
+          - project: e2e-rollup
+            codeowners: 'S04SJ6PL98X'
+          - project: e2e-storybook
+            codeowners: 'S04SVQ8H0G5'
+          - project: e2e-storybook-angular
+            codeowners: 'S04SVQ8H0G5'
+          - project: e2e-vite
+            codeowners: 'S04SJ6PL98X'
+          - project: e2e-webpack
+            codeowners: 'S04SJ6PL98X'
+          - project: e2e-workspace-create
+            codeowners: 'S04SYHYKGNP'
+          - project: e2e-workspace-create-npm
+            codeowners: 'S04SYHYKGNP'
+        exclude:
+          # exclude non-CNW/Lerna tests from non-LTS node versions
+          - node_version: 16
+            project: e2e-angular-core
+          - node_version: 16
+            project: e2e-angular-extensions
+          - node_version: 16
+            project: e2e-cypress
+          - node_version: 16
+            project: e2e-esbuild
+          - node_version: 16
+            project: e2e-jest
+          - node_version: 16
+            project: e2e-js
+          - node_version: 16
+            project: e2e-linter
+          - node_version: 16
+            project: e2e-next
+          - node_version: 16
+            project: e2e-node
+          - node_version: 16
+            project: e2e-nx-init
+          - node_version: 16
+            project: e2e-nx-misc
+          - node_version: 16
+            project: e2e-plugin
+          - node_version: 16
+            project: e2e-lerna-smoke-tests
+          - node_version: 16
+            project: e2e-react-core
+          - node_version: 16
+            project: e2e-react-extensions
+          - node_version: 16
+            project: e2e-web
+          - node_version: 16
+            project: e2e-rollup
+          - node_version: 16
+            project: e2e-storybook
+          - node_version: 16
+            project: e2e-storybook-angular
+          - node_version: 16
+            project: e2e-vite
+          - node_version: 16
+            project: e2e-webpack
+          - node_version: 19
+            project: e2e-angular-core
+          - node_version: 19
+            project: e2e-angular-extensions
+          - node_version: 19
+            project: e2e-cypress
+          - node_version: 19
+            project: e2e-esbuild
+          - node_version: 19
+            project: e2e-jest
+          - node_version: 19
+            project: e2e-js
+          - node_version: 19
+            project: e2e-linter
+          - node_version: 19
+            project: e2e-next
+          - node_version: 19
+            project: e2e-node
+          - node_version: 19
+            project: e2e-nx-init
+          - node_version: 19
+            project: e2e-nx-misc
+          - node_version: 19
+            project: e2e-plugin
+          - node_version: 19
+            project: e2e-lerna-smoke-tests
+          - node_version: 19
+            project: e2e-react-core
+          - node_version: 19
+            project: e2e-react-extensions
+          - node_version: 19
+            project: e2e-web
+          - node_version: 19
+            project: e2e-rollup
+          - node_version: 19
+            project: e2e-storybook
+          - node_version: 19
+            project: e2e-storybook-angular
+          - node_version: 19
+            project: e2e-vite
+          - node_version: 19
+            project: e2e-webpack
       fail-fast: false
 
-    name: ${{ matrix.packages }}
+    name: ${{ matrix.project }} (v${{ matrix.node_version }})
     steps:
-    - name: Checkout
-      uses: actions/checkout@v2
-      with:
-        fetch-depth: 0
+      - name: Checkout
+        uses: actions/checkout@v3
 
-    - name: Use Node.js ${{ matrix.node_version }}
-      uses: actions/setup-node@v2.4.0
-      with:
-        node-version: ${{ matrix.node_version }}
-        registry-url: http://localhost:4872
+      - name: Prepare dir for output
+        run: mkdir -p outputs
 
-    - name: Yarn cache directory path
-      id: yarn-cache-dir-path
-      run: echo "::set-output name=dir::$(yarn cache dir)"
+      - uses: pnpm/action-setup@v2
+        name: Install pnpm
+        with:
+          version: 8.3.1
+          run_install: false
 
-    - name: Cache yarn
-      uses: actions/cache@v2
-      with:
-        path: ${{ steps.yarn-cache-dir-path.outputs.dir }}
-        key: windows-node-${{ matrix.node_version }}-yarn-${{ hashFiles('yarn.lock') }}
-        restore-keys: |
-          windows-node-${{ matrix.node_version }}-yarn-
-          windows-node-${{ matrix.node_version }}-
-          windows-
+      - name: Use Node.js ${{ matrix.node_version }}
+        uses: actions/setup-node@v3
+        with:
+          node-version: ${{ matrix.node_version }}
+          cache: 'pnpm'
 
-    - name: Install packages
-      run: yarn install --prefer-offline --frozen-lockfile --non-interactive
+      - name: Cache node_modules
+        id: cache-modules
+        uses: actions/cache@v3
+        with:
+          path: '**/node_modules'
+          key: ${{ runner.os }}-modules-${{ matrix.node_version }}-${{ github.run_id }}
 
-    - name: Run e2e tests
-      run: yarn nx run-many --target=e2e --projects="${{ join(matrix.packages) }}" --parallel=1
-      env:
-        GIT_AUTHOR_EMAIL: test@test.com
-        GIT_AUTHOR_NAME: Test
-        GIT_COMMITTER_EMAIL: test@test.com
-        GIT_COMMITTER_NAME: Test
-        NX_E2E_CI_CACHE_KEY: e2e-gha-windows-${{ matrix.node_version }}-${{ matrix.package_manager }}
-        NX_E2E_RUN_CYPRESS: ${{ 'true' }}
-        NODE_OPTIONS: --max_old_space_size=8192
-        SELECTED_PM: ${{ matrix.package_manager }}
-        npm_config_registry: http://localhost:4872
-        NX_VERBOSE_LOGGING: ${{ 'true' }}
-        NX_E2E_SKIP_BUILD_CLEANUP: ${{ 'true' }}
-        NX_CACHE_DIRECTORY: ${{ 'tmp' }}
+      - name: Install packages
+        run: pnpm install --frozen-lockfile
 
-    - name: Setup tmate session
-      if: ${{ github.event_name == 'workflow_dispatch' && github.event.inputs.debug_enabled && failure() }}
-      uses: mxschmitt/action-tmate@v3.8
-      with:
-        sudo: false # disable sudo for windows debugging
+      - name: Cache Cypress
+        id: cache-cypress
+        uses: actions/cache@v3
+        with:
+          path: '${{ github.workspace }}/.cypress'
+          key: ${{ runner.os }}-cypress
+
+      - name: Install Cypress
+        if: steps.cache-cypress.outputs.cache-hit != 'true'
+        run: npx cypress install
+
+      - name: Configure git metadata (needed for lerna smoke tests)
+        run: |
+          git config --global user.email test@test.com
+          git config --global user.name "Test Test"
+
+      - name: Run e2e tests
+        id: e2e-run
+        run: pnpm nx run ${{ matrix.project }}:e2e
+        shell: bash
+        timeout-minutes: 120
+        env:
+          GIT_AUTHOR_EMAIL: test@test.com
+          GIT_AUTHOR_NAME: Test
+          GIT_COMMITTER_EMAIL: test@test.com
+          GIT_COMMITTER_NAME: Test
+          NX_E2E_CI_CACHE_KEY: e2e-gha-windows-${{ matrix.node_version }}-${{ matrix.package_manager }}
+          NODE_OPTIONS: --max_old_space_size=8192
+          SELECTED_PM: ${{ matrix.package_manager }}
+          npm_config_registry: http://localhost:4872
+          NX_CACHE_DIRECTORY: 'tmp'
+          NX_E2E_SKIP_BUILD_CLEANUP: 'true'
+          NX_E2E_RUN_E2E: 'true'
+          NX_E2E_VERBOSE_LOGGING: 'true'
+          NX_PERF_LOGGING: 'false'
+          NX_DAEMON: 'true'
+
+      - name: Save matrix config in file
+        if: ${{ always() }}
+        id: save-matrix
+        shell: bash
+        run: |
+          matrix=$((
+            echo '${{ toJSON(matrix) }}'
+          ) | jq -c '. + { "status": "${{ steps.e2e-run.outcome}}" }')
+          echo "$matrix" > matrix
+          path=outputs/windows-${{ matrix.node_version}}-${{ matrix.package_manager}}-${{ matrix.project }}
+          echo "path=$path" >> $GITHUB_OUTPUT
+          echo "$matrix" > $path
+
+      - name: Upload matrix config
+        uses: actions/upload-artifact@v3
+        if: ${{ always() }}
+        with:
+          name: outputs
+          path: ${{ steps.save-matrix.outputs.path }}
+
+      - name: Setup tmate session
+        if: ${{ github.event_name == 'workflow_dispatch' && inputs.debug_enabled && failure() }}
+        uses: mxschmitt/action-tmate@v3.8
+        timeout-minutes: 15
+        with:
+          sudo: false # disable sudo for windows debugging
+
+  process-result:
+    if: ${{ always() }}
+    runs-on: ubuntu-latest
+    needs: e2e
+    outputs:
+      message: ${{ steps.process-json.outputs.SLACK_MESSAGE }}
+      codeowners: ${{ steps.process-json.outputs.CODEOWNERS }}
+    steps:
+      - name: Load outputs
+        uses: actions/download-artifact@v3
+        with:
+          name: outputs
+          path: outputs
+
+      - name: Join and stringify matrix configs
+        id: combine-json
+        shell: bash
+        run: |
+          combined=$((jq -s . outputs/*) | jq tostring)
+          echo "combined=$combined" >> $GITHUB_OUTPUT
+
+      - name: Make slack outputs
+        id: process-json
+        uses: actions/github-script@v6
+        env:
+          GITHUB_TOKEN: ${{ github.token }}
+        with:
+          script: |
+            const combined = JSON.parse(${{ steps.combine-json.outputs.combined }});
+            const failedProjects = combined.filter(c => c.status === 'failure').sort((a, b) => a.project.localeCompare(b.project));
+
+            // codeowners
+            const codeowners = new Set();
+            failedProjects.forEach(c => {
+              codeowners.add(c.codeowners);
+            });
+            core.setOutput('CODEOWNERS', Array.from(codeowners).join(','));
+
+            // message
+            let result = `
+              *OS* Windows
+              *Package manager* npm
+              \`\`\`
+              | Failed project                 | Node |
+              |--------------------------------|------|`;
+            failedProjects.forEach(matrix => {
+              result += `\n| ${matrix.project.padEnd(30)} | v${matrix.node_version.toString().padEnd(3)} |`
+            });
+            result += `\`\`\``;
+            const message = result.split('\n').map(l => l.trim()).join('\n');
+            core.setOutput('SLACK_MESSAGE', message);
+
+  report-failure:
+    if: ${{ failure() && github.repository_owner == 'nrwl' && github.event_name != 'workflow_dispatch' }}
+    needs: process-result
+    runs-on: ubuntu-latest
+    name: Report failure
+    steps:
+      - name: Send notification
+        uses: ravsamhq/notify-slack-action@v2
+        with:
+          status: 'failure'
+          message_format: '{emoji} Workflow has {status_message} ${{ needs.process-result.outputs.message }}'
+          notification_title: '{workflow}'
+          footer: '<{run_url}|View Run> / Last commit <{commit_url}|{commit_sha}>'
+          mention_groups: ${{ needs.process-result.outputs.codeowners }}
+        env:
+          SLACK_WEBHOOK_URL: ${{ secrets.ACTION_MONITORING_SLACK }}
 
   report-success:
-    if: ${{ github.repository_owner == 'nrwl' && github.event_name == 'workflow_dispatch' }} # only once it's fixed on manual dispatch
+    if: ${{ success() && github.repository_owner == 'nrwl' && github.event_name != 'workflow_dispatch' }}
     needs: e2e
     runs-on: ubuntu-latest
     name: Report success
     steps:
       - name: Send notification
-        uses: ravsamhq/notify-slack-action@v1
+        uses: ravsamhq/notify-slack-action@v2
         with:
           status: ${{ needs.e2e.result }}
-          message_format: '{emoji} *{workflow}* {status_message} (last commit <{commit_url}|{commit_sha}>)'
-          notification_title: '{workflow} has {status_message}'
-          footer: '<{run_url}|View Run>'
-          mention_users: 'U01UELKLYF2,U9NPA6C90'
-          mention_users_when: 'failure,warnings'
-        env:
-          SLACK_WEBHOOK_URL: ${{ secrets.ACTION_MONITORING_SLACK }}
-
-  report:
-    if: ${{ always() && github.repository_owner == 'nrwl' && github.event_name != 'workflow_dispatch' }}
-    needs: e2e
-    runs-on: ubuntu-latest
-    name: Report status
-    steps:
-      - name: Send notification
-        uses: ravsamhq/notify-slack-action@v1
-        with:
-          status: ${{ needs.e2e.result }}
-          message_format: '{emoji} *{workflow}* {status_message} (last commit <{commit_url}|{commit_sha}>)'
-          notification_title: '{workflow} has {status_message}'
-          footer: '<{run_url}|View Run>'
-          mention_users: 'U01UELKLYF2,U9NPA6C90'
-          mention_users_when: 'failure,warnings'
+          message_format: '{emoji} Workflow has {status_message}'
+          notification_title: '{workflow}'
+          footer: '<{run_url}|View Run> / Last commit <{commit_url}|{commit_sha}>'
         env:
           SLACK_WEBHOOK_URL: ${{ secrets.ACTION_MONITORING_SLACK }}

.github/workflows/generate-embeddings.yml

@@ -0,0 +1,53 @@
+name: Generate embeddings
+
+on:
+  schedule:
+    - cron: "0 5 * * 0,4" # sunday, thursday 5AM
+  workflow_dispatch:
+jobs:
+  cache-and-install:
+    if: github.repository == 'nrwl/nx'
+    runs-on: ubuntu-latest
+    strategy:
+      matrix:
+        node-version: [18]
+        
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3
+
+      - name: Install Node.js
+        uses: actions/setup-node@v3
+        with:
+          node-version: 18
+
+      - name: Install pnpm
+        uses: pnpm/action-setup@v2
+        id: pnpm-install
+        with:
+          version: 7
+          run_install: false
+
+      - name: Get pnpm store directory
+        id: pnpm-cache
+        shell: bash
+        run: |
+          echo "STORE_PATH=$(pnpm store path)" >> $GITHUB_OUTPUT
+
+      - name: Setup pnpm cache
+        uses: actions/cache@v3
+        with:
+          path: ${{ steps.pnpm-cache.outputs.STORE_PATH }}
+          key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
+          restore-keys: |
+            ${{ runner.os }}-pnpm-store-
+
+      - name: Install dependencies
+        run: pnpm install --no-frozen-lockfile
+
+      - name: Run embeddings script
+        run: pnpm exec nx run tools-documentation-create-embeddings:run-node 
+        env:
+            NX_NEXT_PUBLIC_SUPABASE_URL: ${{ secrets.NX_NEXT_PUBLIC_SUPABASE_URL }}
+            NX_SUPABASE_SERVICE_ROLE_KEY: ${{ secrets.NX_SUPABASE_SERVICE_ROLE_KEY }}
+            NX_OPENAI_KEY: ${{ secrets.NX_OPENAI_KEY }}

.github/workflows/issue-notifier.yml

@@ -0,0 +1,69 @@
+name: Issue Statistics
+
+on:
+  schedule:
+    - cron: "0 0 * * 0"
+  workflow_dispatch:
+
+permissions:
+  issues: read
+  pull-requests: read
+
+jobs:
+  issues-report:
+    if: ${{ github.repository_owner == 'nrwl' }}
+    runs-on: ubuntu-latest
+    name: Report status
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3
+
+      - uses: pnpm/action-setup@v2
+        with:
+          version: 8.2
+
+      - name: Use Node.js ${{ matrix.node_version }}
+        uses: actions/setup-node@v3
+        with:
+          node-version: '18'
+          cache: 'pnpm'
+
+      - name: Cache node_modules
+        id: cache-modules
+        uses: actions/cache@v3
+        with:
+          lookup-only: true
+          path: '**/node_modules'
+          key: pnpm-${{ hashFiles('pnpm-lock.yaml') }}
+
+      - name: Install packages
+        run: pnpm install --frozen-lockfile
+
+      - name: Download artifact
+        id: download-artifact
+        uses: dawidd6/action-download-artifact@v2 # Needed since we are downloading artifact from a different workflow run, official actions/download-artifact doesn't support this.
+        with:
+          name: cached-issue-data
+          path: ${{ github.workspace }}/scripts/issues-scraper/cached
+          search_artifacts: true
+        continue-on-error: true
+
+      - name: Collect Issue Data
+        id: collect
+        run: npx ts-node ./scripts/issues-scraper/index.ts
+        env:
+          GITHUB_TOKEN: ${{ github.token }}
+
+      - uses: actions/upload-artifact@v3
+        with:
+          name: cached-issue-data
+          path: ./scripts/issues-scraper/cached/data.json
+
+      - name: Send GitHub Action trigger data to Slack workflow
+        id: slack
+        uses: slackapi/slack-github-action@v1.23.0
+        with:
+          payload: ${{ steps.collect.outputs.SLACK_MESSAGE }}
+        env:
+          SLACK_WEBHOOK_URL: ${{ secrets.SLACK_ISSUES_REPORT_URL }}
+          SLACK_WEBHOOK_TYPE: INCOMING_WEBHOOK

.github/workflows/lock-threads.yml

@@ -0,0 +1,30 @@
+name: "Lock Threads"
+
+on:
+  schedule:
+    - cron: "0 0 * * *" # Once a day, at midnight UTC
+  workflow_dispatch:
+
+permissions:
+  issues: write
+  pull-requests: write
+
+concurrency:
+  group: lock
+
+jobs:
+  action:
+    if: ${{ github.repository_owner == 'nrwl' }}
+    runs-on: ubuntu-latest
+    steps:
+      - uses: dessant/lock-threads@v4
+        id: lockthreads
+        with:
+          github-token: ${{ github.token }}
+          issue-inactive-days: "30" # Lock issues after 30 days of being closed
+          pr-inactive-days: "5" # Lock closed PRs after 5 days. This ensures that issues that stem from a PR are opened as issues, rather than comments on the recently merged PR.
+          add-issue-labels: "outdated"
+          issue-comment: >
+            This issue has been closed for more than 30 days. If this issue is still occuring, please open a new issue with more recent context.
+          pr-comment: >
+            This pull request has already been merged/closed. If you experience issues related to these changes, please open a new issue referencing this pull request.

.github/workflows/npm-audit.yml

@@ -5,25 +5,42 @@ on:
     - cron: "0 0 * * *"
   workflow_dispatch:
 
+permissions: {}
 jobs:
   audit:
+    permissions:
+      contents: read  #  to fetch code (actions/checkout)
+
     runs-on: ubuntu-latest
 
     steps:
-    - uses: actions/checkout@v2
+      - name: Checkout
+        uses: actions/checkout@v3
 
-    - name: Run a security audit
-      run: npx audit-ci --critical --report-type summary
+      - name: Install PNPM
+        run: |
+          npm install -g @pnpm/exe@8.3.1
 
-    - name: Report Status
-      if: ${{ always() && github.repository_owner == 'nrwl' }}
-      uses: ravsamhq/notify-slack-action@v1
-      with:
-        status: ${{ job.status }}
-        message_format: '{emoji} *{workflow}* {status_message} on <{commit_url}|{commit_sha}>'
-        notification_title: '{workflow} has {status_message}'
-        footer: 'From <{repo_url}|{repo}>'
-        mention_users: 'U01UELKLYF2'
-        mention_users_when: 'failure,warnings'
-      env:
-        SLACK_WEBHOOK_URL: ${{ secrets.ACTION_MONITORING_SLACK }}
+      - name: Run a security audit
+        run: pnpm dlx audit-ci --critical --report-type summary
+
+    # - name: Run Dependency confusion supply chain check
+    #  run: npx snync -d .
+
+  report:
+    if: ${{ always() && github.repository_owner == 'nrwl' && github.event_name != 'workflow_dispatch' }}
+    needs: audit
+    runs-on: ubuntu-latest
+    name: Report status
+    steps:
+      - name: Send notification
+        uses: ravsamhq/notify-slack-action@v2
+        with:
+          status: ${{ needs.audit.result }}
+          message_format: '{emoji} Audit has {status_message}'
+          notification_title: '{workflow}'
+          footer: '<{run_url}|View Run> / Last commit <{commit_url}|{commit_sha}>'
+          mention_users: 'U01UELKLYF2,U9NPA6C90'
+          mention_users_when: 'failure,warnings'
+        env:
+          SLACK_WEBHOOK_URL: ${{ secrets.ACTION_MONITORING_SLACK }}

.github/workflows/publish.yml

@@ -0,0 +1,239 @@
+name: publish
+env:
+  DEBUG: napi:*
+  NX_RUN_GROUP: ${{ github.run_id }}-${{ github.run_attempt }}
+  NPM_CONFIG_PROVENANCE: true
+on:
+  workflow_dispatch:
+  release:
+    types: [published]
+jobs:
+  build:
+    if: "!contains(github.event.head_commit.message, 'skip ci')"
+    strategy:
+      fail-fast: false
+      matrix:
+        settings:
+          - host: macos-latest
+            target: x86_64-apple-darwin
+            build: |
+              pnpm nx run-many --target=build-native -- --target=x86_64-apple-darwin
+          - host: windows-latest
+            build: pnpm nx run-many --target=build-native -- --target=x86_64-pc-windows-msvc
+            target: x86_64-pc-windows-msvc
+          # Windows 32bit (not needed)
+          # - host: windows-latest
+          #   build: |
+          #     yarn nx -- run-many --target=build-native -- --target=i686-pc-windows-msvc
+          #   target: i686-pc-windows-msvc
+          - host: ubuntu-latest
+            target: x86_64-unknown-linux-gnu
+            docker: ghcr.io/napi-rs/napi-rs/nodejs-rust:lts-debian
+            build: |-
+              set -e &&
+              pnpm --version &&
+              pnpm nx run-many --target=build-native -- --target=x86_64-unknown-linux-gnu
+          - host: ubuntu-latest
+            target: x86_64-unknown-linux-musl
+            docker: ghcr.io/napi-rs/napi-rs/nodejs-rust:lts-alpine
+            build: set -e && pnpm nx run-many --target=build-native -- --target=x86_64-unknown-linux-musl
+          - host: macos-latest
+            target: aarch64-apple-darwin
+            build: |
+              sudo rm -Rf /Library/Developer/CommandLineTools/SDKs/*;
+              export CC=$(xcrun -f clang);
+              export CXX=$(xcrun -f clang++);
+              SYSROOT=$(xcrun --sdk macosx --show-sdk-path);
+              export CFLAGS="-isysroot $SYSROOT -isystem $SYSROOT";
+              pnpm nx run-many --target=build-native -- --target=aarch64-apple-darwin
+          - host: ubuntu-latest
+            target: aarch64-unknown-linux-gnu
+            docker: ghcr.io/napi-rs/napi-rs/nodejs-rust:lts-debian-aarch64
+            build: |-
+              set -e &&
+              pnpm --version &&
+              pnpm nx run-many --target=build-native -- --target=aarch64-unknown-linux-gnu
+          - host: ubuntu-latest
+            target: armv7-unknown-linux-gnueabihf
+            setup: |
+              sudo apt-get update
+              sudo apt-get install gcc-arm-linux-gnueabihf -y
+            build: |
+              pnpm nx run-many --target=build-native -- --target=armv7-unknown-linux-gnueabihf
+          # Android (not needed)
+          # - host: ubuntu-latest
+          #   target: aarch64-linux-android
+          #   build: |
+          #     pnpm nx run-many --target=build-native -- --target=aarch64-linux-android
+          # - host: ubuntu-latest
+          #   target: armv7-linux-androideabi
+          #   build: |
+          #     pnpm nx run-many --target=build-native -- --target=armv7-linux-androideabi
+          - host: ubuntu-latest
+            target: aarch64-unknown-linux-musl
+            docker: ghcr.io/napi-rs/napi-rs/nodejs-rust:lts-alpine
+            build: |-
+              set -e &&
+              rustup target add aarch64-unknown-linux-musl &&
+              pnpm nx run-many --target=build-native -- --target=aarch64-unknown-linux-musl
+          - host: windows-latest
+            target: aarch64-pc-windows-msvc
+            build: pnpm nx run-many --target=build-native -- --target=aarch64-pc-windows-msvc
+    name: stable - ${{ matrix.settings.target }} - node@18
+    runs-on: ${{ matrix.settings.host }}
+    steps:
+      - uses: actions/checkout@v3
+
+      - uses: pnpm/action-setup@v2
+        with:
+          version: 8.2
+
+      - name: Setup node
+        uses: actions/setup-node@v3
+        if: ${{ !matrix.settings.docker }}
+        with:
+          node-version: 18
+          check-latest: true
+          cache: 'pnpm'
+
+      - name: Install
+        uses: dtolnay/rust-toolchain@stable
+        if: ${{ !matrix.settings.docker }}
+        with:
+          targets: ${{ matrix.settings.target }}
+
+      - name: Cache cargo
+        uses: actions/cache@v3
+        with:
+          path: |
+            ~/.cargo/registry/index/
+            ~/.cargo/registry/cache/
+            ~/.cargo/git/db/
+            .cargo-cache
+            target/
+          key: ${{ matrix.settings.target }}-cargo-registry
+      - uses: goto-bus-stop/setup-zig@v2
+        if: ${{ matrix.settings.target == 'armv7-unknown-linux-gnueabihf' }}
+        with:
+          version: 0.10.0
+      - name: Setup toolchain
+        run: ${{ matrix.settings.setup }}
+        if: ${{ matrix.settings.setup }}
+        shell: bash
+      - name: Setup node x86
+        if: matrix.settings.target == 'i686-pc-windows-msvc'
+        run: yarn config set supportedArchitectures.cpu "ia32"
+        shell: bash
+      - name: Install dependencies
+        run: pnpm install --frozen-lockfile
+        timeout-minutes: 30
+      - name: Setup node x86
+        uses: actions/setup-node@v3
+        if: matrix.settings.target == 'i686-pc-windows-msvc'
+        with:
+          node-version: 18
+          check-latest: true
+          cache: pnpm
+          architecture: x86
+      - name: Build in docker
+        uses: addnab/docker-run-action@v3
+        if: ${{ matrix.settings.docker }}
+        with:
+          image: ${{ matrix.settings.docker }}
+          options: --user 0:0 -v ${{ github.workspace }}/.cargo-cache/git/db:/usr/local/cargo/git/db -v ${{ github.workspace }}/.cargo/registry/cache:/usr/local/cargo/registry/cache -v ${{ github.workspace }}/.cargo/registry/index:/usr/local/cargo/registry/index -v ${{ github.workspace }}:/build -w /build
+          run: ${{ matrix.settings.build }}
+      - name: Build
+        run: ${{ matrix.settings.build }}
+        if: ${{ !matrix.settings.docker }}
+        shell: bash
+      - name: Upload artifact
+        uses: actions/upload-artifact@v3
+        with:
+          name: bindings-${{ matrix.settings.target }}
+          path: packages/**/*.node
+          if-no-files-found: error
+  build-freebsd:
+     runs-on: macos-12
+     name: Build FreeBSD
+     steps:
+       - uses: actions/checkout@v3
+       - name: Build
+         id: build
+         uses: vmactions/freebsd-vm@v0
+         env:
+           DEBUG: napi:*
+           RUSTUP_HOME: /usr/local/rustup
+           CARGO_HOME: /usr/local/cargo
+           RUSTUP_IO_THREADS: 1
+         with:
+           envs: DEBUG RUSTUP_HOME CARGO_HOME RUSTUP_IO_THREADS
+           usesh: true
+           mem: 4096
+           prepare: |
+             pkg install -y -f curl node libnghttp2 npm
+             npm install --location=global --ignore-scripts pnpm
+             curl https://sh.rustup.rs -sSf --output rustup.sh
+             sh rustup.sh -y --profile minimal --default-toolchain stable
+             export PATH="/usr/local/cargo/bin:$PATH"
+             echo "~~~~ rustc --version ~~~~"
+             rustc --version
+             echo "~~~~ node -v ~~~~"
+             node -v
+             echo "~~~~ pnpm --version ~~~~"
+             pnpm --version
+           run: |
+             export PATH="/usr/local/cargo/bin:$PATH"
+             pwd
+             ls -lah
+             whoami
+             env
+             freebsd-version
+             mkdir -p /Users/runner/work/_temp/_github_workflow
+             echo "{}" > /Users/runner/work/_temp/_github_workflow/event.json
+             pnpm install --frozen-lockfile --ignore-scripts
+             pnpm nx run-many --target=build-native -- --target=x86_64-unknown-freebsd
+             rm -rf node_modules
+             rm -rf dist
+       - name: Upload artifact
+         uses: actions/upload-artifact@v3
+         with:
+           name: bindings-freebsd
+           path: packages/**/*.node
+           if-no-files-found: error
+  publish:
+    if: ${{ github.event_name == 'release' && github.repository_owner == 'nrwl' }}
+    name: Publish
+    runs-on: ubuntu-latest
+    permissions:
+      id-token: write
+    needs:
+      - build-freebsd
+      - build
+    steps:
+      - uses: actions/checkout@v3
+      - uses: pnpm/action-setup@v2
+        with:
+          version: 8.2
+      - name: Setup node
+        uses: actions/setup-node@v3
+        with:
+          node-version: 18
+          check-latest: true
+          cache: 'pnpm'
+      - name: Install dependencies
+        run: pnpm install --frozen-lockfile
+      - name: Download all artifacts
+        uses: actions/download-artifact@v3
+        with:
+          path: artifacts
+      - name: List artifacts
+        run: ls -R artifacts
+        shell: bash
+      - name: Publish
+        run: |
+          git checkout -b publish/$GITHUB_REF_NAME
+          npm config set //registry.npmjs.org/:_authToken=$NPM_TOKEN
+          pnpm nx-release --local=false $GITHUB_REF_NAME
+    env:
+      GH_TOKEN: ${{ github.token }}
+      NPM_TOKEN: ${{ secrets.NPM_TOKEN }}

.github/workflows/schedule-stale.yml

@@ -1,9 +1,18 @@
 on:
   schedule:
     - cron: "0 0 * * *"
+
 name: Stale Bot workflow
+
+permissions: {}
+
 jobs:
   build:
+    if: ${{ github.repository_owner == 'nrwl' }}
+    permissions:
+      issues: write  #  to close stale issues (actions/stale)
+      pull-requests: write  #  to close stale PRs (actions/stale)
+
     name: stale
     runs-on: ubuntu-latest
     steps:

.gitignore

@@ -1,5 +1,6 @@
 node_modules
-.idea
+/.idea
+/.fleet
 /.vscode
 dist
 /build
@@ -12,8 +13,24 @@ jest.debug.config.js
 .tool-versions
 /.nx-cache
 /.verdaccio/build/local-registry
-dep-graph/client/src/assets/environment.js
+/graph/client/src/assets/environment.js
+/graph/client/src/assets/dev/environment.js
+/graph/client/src/assets/generated-project-graphs
+/graph/client/src/assets/generated-task-graphs
 /nx-dev/nx-dev/public/documentation
 /nx-dev/nx-dev/public/images/open-graph
+/scripts/issues-scraper/cached
 # Lerna creates this
 CHANGELOG.md
+
+# Next.js
+.next
+
+# Angular Cache
+.angular
+
+# Local dev files
+.env
+.bashrc
+
+*.node

.husky/post-checkout

@@ -0,0 +1,3 @@
+#!/bin/sh
+changedFiles="$(git diff-tree -r --name-only --no-commit-id $1 $2)"
+node ./scripts/notify-lockfile-changes.js $changedFiles

.husky/post-merge

@@ -0,0 +1,3 @@
+#!/bin/sh
+changedFiles="$(git diff-tree -r --name-only --no-commit-id ORIG_HEAD HEAD)"
+node ./scripts/notify-lockfile-changes.js $changedFiles

.husky/pre-push

@@ -1,6 +1,6 @@
 #!/usr/bin/env sh
 
-yarn check-lock-files
-yarn check-commit
-yarn documentation
-yarn pretty-quick --check
+pnpm check-lock-files &&
+pnpm check-commit &&
+pnpm documentation &&
+pnpm pretty-quick --check

.nxignore

@@ -1 +1,2 @@
-nx-dev/**/jest.config.js
+nx-dev/**/jest.config.js
+.next

.prettierignore

@@ -1,24 +1,36 @@
-tmp
-/test
-/build
-node_modules
-/package.json
-packages/workspace/src/generators/**/files/**/*.json
-packages/workspace/src/core/dep-graph/vendor.js
-packages/angular/src/schematics/**/files/**/*.json
-packages/angular/src/migrations/**/files/**/*.json
-packages/web/src/generators/**/files/**/*.json
-packages/node/src/schematics/**/files/**/*.json
-packages/express/src/schematics/**/files/**/*.json
-packages/nest/src/schematics/**/files/**/*.json
-packages/react/src/schematics/**/files/**/*.json
-packages/jest/src/schematics/**/files/**/*.json
-packages/**/schematics/**/files/**/*.html
-packages/**/generators/**/files/**/*.html
-/.vscode
-/.idea
-/.github
-/coverage
-/.yarn
-/.verdaccio/build/local-registry
-/dist
+tmp
+/test
+/build
+node_modules
+/package.json
+/pnpm-lock.yaml
+packages/workspace/src/generators/**/files/**/*.json
+packages/angular/src/schematics/**/files/**/*.json
+packages/angular/src/migrations/**/files/**/*.json
+packages/web/src/generators/**/files/**/*.json
+packages/node/src/schematics/**/files/**/*.json
+packages/express/src/schematics/**/files/**/*.json
+packages/nest/src/schematics/**/files/**/*.json
+packages/react/src/schematics/**/files/**/*.json
+packages/jest/src/schematics/**/files/**/*.json
+packages/nx/src/plugins/js/lock-file/__fixtures__/**/*.*
+packages/**/schematics/**/files/**/*.html
+packages/**/generators/**/files/**/*.html
+packages/nx/src/native/
+nx-dev/nx-dev/.next/
+nx-dev/nx-dev/public/documentation
+graph/client/src/assets/environment.js
+graph/client/src/assets/dev/environment.js
+graph/client/src/assets/generated-graphs
+graph/client/src/assets/generated-project-graphs
+graph/client/src/assets/generated-task-graphs
+/.vscode
+/.idea
+/.fleet
+/.github
+/coverage
+/.yarn
+/.verdaccio/build/local-registry
+/dist
+/.env
+CODEOWNERS

.verdaccio/config.yml

@@ -9,10 +9,14 @@ auth:
 uplinks:
   npmjs:
     url: https://registry.npmjs.org/
-    cache: true
+    maxage: 60m
+    max_fails: 20
+    fail_timeout: 2m
   yarn:
     url: https://registry.yarnpkg.com
-    cache: true
+    maxage: 60m
+    max_fails: 20
+    fail_timeout: 2m
 
 packages:
   '@*/*':
@@ -38,4 +42,7 @@ packages:
 logs:
   type: stdout
   format: pretty
-  level: http
+  level: warn
+
+publish:
+  allow_offline: true # set offline to true to allow publish offline

.yarnrc

@@ -1,2 +0,0 @@
---ignore-engines true
-yarnPath .yarn/releases/yarn-1.22.19.cjs

CODEOWNERS

@@ -0,0 +1,180 @@
+# Any file not covered by a rule below, will default to Jason + Victor and a few select others.
+* @FrozenPandaz @vsavkin
+/packages/**/* @FrozenPandaz @vsavkin @AgentEnder @jaysoo @JamesHenry
+/e2e/**/* @FrozenPandaz @vsavkin @AgentEnder @jaysoo @JamesHenry
+/scripts/**/* @FrozenPandaz @vsavkin @AgentEnder @jaysoo @JamesHenry
+/tools/**/* @FrozenPandaz @vsavkin @AgentEnder @jaysoo @JamesHenry
+package.json @nrwl/nx-core-reviewers
+pnpm-lock.yaml @nrwl/nx-core-reviewers
+
+# Docs Site + Graph
+/docs @nrwl/nx-docs-reviewers
+/docs/nx-cloud @StalkAltan @rarmatei @nrwl/nx-docs-reviewers
+/graph/** @philipjfulcher @FrozenPandaz @bcabanes
+/images @nrwl/nx-docs-reviewers
+/nx-dev/** @nrwl/nx-docs-reviewers
+/typedoc-theme @nrwl/nx-docs-reviewers
+
+# Plugin Verticals
+
+## Angular
+/docs/generated/packages/angular/** @nrwl/nx-angular-reviewers @nrwl/nx-docs-reviewers
+/docs/shared/packages/angular/** @nrwl/nx-angular-reviewers @nrwl/nx-docs-reviewers
+/packages/angular/** @nrwl/nx-angular-reviewers
+/e2e/angular-core/** @nrwl/nx-angular-reviewers
+/e2e/angular-extensions/** @nrwl/nx-angular-reviewers
+/packages/angular/plugins/component-testing.ts @nrwl/nx-angular-reviewers @nrwl/nx-testing-tools-reviewers
+/packages/angular/src/generators/cypress-component-configuration/** @nrwl/nx-angular-reviewers @nrwl/nx-testing-tools-reviewers
+/packages/angular/src/generators/component-test/** @nrwl/nx-angular-reviewers @nrwl/nx-testing-tools-reviewers
+
+## React
+/docs/generated/packages/react/** @nrwl/nx-react-reviewers @nrwl/nx-docs-reviewers
+/docs/generated/packages/next/** @nrwl/nx-react-reviewers @nrwl/nx-docs-reviewers
+/docs/shared/packages/react/** @nrwl/nx-react-reviewers @nrwl/nx-docs-reviewers
+/docs/shared/packages/next/** @nrwl/nx-react-reviewers @nrwl/nx-docs-reviewers
+/packages/react/** @nrwl/nx-react-reviewers
+/e2e/react-core/** @nrwl/nx-react-reviewers
+/e2e/react-extensions/** @nrwl/nx-react-reviewers
+/packages/next/** @nrwl/nx-react-reviewers
+/e2e/next/** @nrwl/nx-react-reviewers
+/packages/react/plugins/component-testing/** @nrwl/nx-react-reviewers @nrwl/nx-testing-tools-reviewers
+/packages/react/src/generators/cypress-component-configuration/** @nrwl/nx-react-reviewers @nrwl/nx-testing-tools-reviewers
+/packages/react/src/generators/component-test/** @nrwl/nx-react-reviewers @nrwl/nx-testing-tools-reviewers
+
+# React Native
+/docs/generated/packages/detox/** @nrwl/nx-react-reviewers @nrwl/nx-docs-reviewers
+/docs/generated/packages/expo/** @nrwl/nx-react-reviewers @nrwl/nx-docs-reviewers
+/docs/generated/packages/react-native/** @nrwl/nx-react-reviewers @nrwl/nx-docs-reviewers
+/docs/shared/packages/react-native/** @nrwl/nx-react-reviewers @nrwl/nx-docs-reviewers
+/packages/detox/** @nrwl/nx-react-reviewers
+/e2e/detox/** @nrwl/nx-react-reviewers
+/packages/expo/** @nrwl/nx-react-reviewers
+/e2e/expo/** @nrwl/nx-react-reviewers
+/packages/react-native/** @nrwl/nx-react-reviewers
+/e2e/react-native/** @nrwl/nx-react-reviewers
+
+## Node
+/docs/generated/packages/node/** @nrwl/nx-node-reviewers @nrwl/nx-docs-reviewers
+/docs/generated/packages/nest/** @nrwl/nx-node-reviewers @nrwl/nx-docs-reviewers
+/docs/generated/packages/express/** @nrwl/nx-node-reviewers @nrwl/nx-docs-reviewers
+/docs/shared/packages/node/** @nrwl/nx-node-reviewers @nrwl/nx-docs-reviewers
+/docs/shared/packages/express/** @nrwl/nx-node-reviewers @nrwl/nx-docs-reviewers
+/docs/shared/packages/nest/** @nrwl/nx-node-reviewers @FrozenPandaz @nrwl/nx-docs-reviewers
+/packages/node/** @nrwl/nx-node-reviewers
+/packages/express/** @nrwl/nx-node-reviewers
+/packages/nest/** @nrwl/nx-node-reviewers
+/e2e/node/** @nrwl/nx-node-reviewers
+
+## JS
+/docs/generated/packages/js/** @nrwl/nx-js-reviewers @nrwl/nx-docs-reviewers
+/docs/generated/packages/web/** @nrwl/nx-js-reviewers @nrwl/nx-docs-reviewers
+/docs/generated/packages/webpack/** @nrwl/nx-js-reviewers @nrwl/nx-docs-reviewers
+/docs/generated/packages/esbuild/** @nrwl/nx-js-reviewers @nrwl/nx-docs-reviewers
+/docs/generated/packages/rollup/** @nrwl/nx-js-reviewers @nrwl/nx-docs-reviewers
+/docs/generated/packages/vite/** @nrwl/nx-js-reviewers @nrwl/nx-docs-reviewers
+/docs/shared/packages/js/** @nrwl/nx-js-reviewers @nrwl/nx-docs-reviewers
+/docs/shared/packages/web/** @nrwl/nx-js-reviewers @nrwl/nx-docs-reviewers
+/docs/shared/packages/webpack/** @nrwl/nx-js-reviewers @nrwl/nx-docs-reviewers
+/docs/shared/packages/esbuild/** @nrwl/nx-js-reviewers @nrwl/nx-docs-reviewers
+/docs/shared/packages/vite/** @nrwl/nx-js-reviewers @nrwl/nx-docs-reviewers
+/packages/js/** @nrwl/nx-js-reviewers
+/e2e/js/** @nrwl/nx-js-reviewers
+/packages/web/** @nrwl/nx-js-reviewers
+/e2e/web/** @nrwl/nx-js-reviewers
+/packages/webpack/** @nrwl/nx-js-reviewers
+/e2e/webpack/** @nrwl/nx-js-reviewers
+/packages/esbuild/** @nrwl/nx-js-reviewers
+/e2e/esbuild/** @nrwl/nx-js-reviewers
+/packages/rollup/** @nrwl/nx-js-reviewers
+/e2e/rollup/** @nrwl/nx-js-reviewers
+/packages/vite/** @nrwl/nx-js-reviewers
+/e2e/vite/** @nrwl/nx-js-reviewers
+
+## Tools
+/docs/generated/packages/cypress/** @nrwl/nx-testing-tools-reviewers @nrwl/nx-docs-reviewers
+/docs/generated/packages/jest/** @nrwl/nx-testing-tools-reviewers @nrwl/nx-docs-reviewers
+/docs/shared/packages/jest/** @nrwl/nx-testing-tools-reviewers @nrwl/nx-docs-reviewers
+/docs/shared/packages/cypress/** @nrwl/nx-testing-tools-reviewers @nrwl/nx-docs-reviewers
+/packages/cypress/** @nrwl/nx-testing-tools-reviewers
+/e2e/cypress/** @nrwl/nx-testing-tools-reviewers
+/packages/jest/** @nrwl/nx-testing-tools-reviewers
+/e2e/jest/** @nrwl/nx-testing-tools-reviewers
+/packages/playwright/** @nrwl/nx-testing-tools-reviewers
+/e2e/playwright/** @nrwl/nx-testing-tools-reviewers
+
+# Linter
+/docs/generated/packages/eslint-plugin/** @nrwl/nx-linter-reviewers @nrwl/nx-docs-reviewers
+/docs/generated/packages/linter/** @nrwl/nx-linter-reviewers @nrwl/nx-docs-reviewers
+/docs/shared/packages/linter/** @nrwl/nx-linter-reviewers @nrwl/nx-docs-reviewers
+/packages/eslint-plugin/** @nrwl/nx-linter-reviewers
+/packages/linter/** @nrwl/nx-linter-reviewers
+/e2e/linter/** @nrwl/nx-linter-reviewers
+.eslint* @nrwl/nx-linter-reviewers
+
+# Storybook
+/docs/generated/packages/storybook/** @nrwl/nx-storybook-reviewers @nrwl/nx-docs-reviewers
+/docs/shared/packages/storybook/** @nrwl/nx-storybook-reviewers @nrwl/nx-docs-reviewers
+/packages/storybook/** @nrwl/nx-storybook-reviewers
+/e2e/storybook/** @nrwl/nx-storybook-reviewers
+/e2e/storybook-angular/** @nrwl/nx-storybook-reviewers
+
+## Devkit
+/docs/generated/devkit/** @nrwl/nx-devkit-reviewers @nrwl/nx-docs-reviewers
+/docs/generated/packages/devkit/** @nrwl/nx-devkit-reviewers @nrwl/nx-docs-reviewers
+/packages/devkit/** @nrwl/nx-devkit-reviewers
+/packages/devkit/index.js @FrozenPandaz @vsavkin
+/packages/devkit/index.d.ts @FrozenPandaz @vsavkin
+/packages/devkit/public-api.ts @FrozenPandaz @vsavkin
+/packages/devkit/nx.ts @FrozenPandaz @vsavkin
+/packages/devkit/src/utils/module-federation @jaysoo @Coly010
+
+# Nx-Plugin
+/docs/generated/packages/plugin/** @nrwl/nx-devkit-reviewers @nrwl/nx-docs-reviewers
+/docs/shared/packages/plugin/** @nrwl/nx-devkit-reviewers @nrwl/nx-docs-reviewers
+/packages/plugin/** @nrwl/nx-devkit-reviewers
+/e2e/plugin/** @nrwl/nx-devkit-reviewers
+
+## Core
+/docs/generated/cli/** @nrwl/nx-core-reviewers @nrwl/nx-docs-reviewers
+/docs/generated/packages/nx/** @nrwl/nx-core-reviewers @nrwl/nx-docs-reviewers
+/docs/generated/packages/workspace/** @nrwl/nx-core-reviewers @nrwl/nx-docs-reviewers
+/packages/nx/** @nrwl/nx-core-reviewers
+/packages/nx/src/adapter @nrwl/nx-core-reviewers @leosvelperez
+/packages/nx/src/native @nrwl/nx-core-reviewers @nrwl/nx-native-reviewers
+/packages/nx/src/plugins/js/lock-file @nrwl/nx-core-reviewers @meeroslav
+/packages/nx/src/command-line/init/implementation/angular/** @nrwl/nx-angular-reviewers @nrwl/nx-core-reviewers
+/e2e/nx-init/src/nx-init-angular.test.ts @nrwl/nx-angular-reviewers
+/packages/nx/src/command-line/init/implementation/react/** @nrwl/nx-react-reviewers
+/e2e/nx-init/src/nx-init-react.test.ts @nrwl/nx-react-reviewers
+/e2e/nx-init/src/files/cra/** @nrwl/nx-react-reviewers
+/e2e/nx*/** @nrwl/nx-core-reviewers
+/packages/workspace/** @nrwl/nx-core-reviewers
+/e2e/workspace-create/** @nrwl/nx-core-reviewers
+/e2e/workspace-create-npm/** @nrwl/nx-core-reviewers
+
+# Misc
+/e2e/lerna-smoke-tests/** @vsavkin @JamesHenry
+/e2e/utils/** @meeroslav @nrwl/nx-testing-tools-reviewers @vsavkin @mandarini
+/community @nrwl/nx-devkit-reviewers
+/CONTRIBUTING.md @FrozenPandaz @isaacplmann
+/CODE_OF_CONDUCT.md @FrozenPandaz @isaacplmann
+/CODEOWNERS @FrozenPandaz @AgentEnder
+
+# Scripts
+/scripts/documentation @nrwl/nx-docs-reviewers
+/scripts/angular-support-upgrades @nrwl/nx-angular-reviewers
+
+# CI
+/.circleci/** @nrwl/nx-pipelines-reviewers
+/.github/** @nrwl/nx-pipelines-reviewers
+/.husky/** @nrwl/nx-pipelines-reviewers
+/packages/workspace/src/generators/ci-workflow/** @nrwl/nx-pipelines-reviewers
+
+# Global Files
+project.json @FrozenPandaz @vsavkin
+jest.config.ts @nrwl/nx-testing-tools-reviewers @FrozenPandaz
+jest.preset.js @nrwl/nx-testing-tools-reviewers @FrozenPandaz
+
+# Overrides - These are applied last, so override any matches above.
+docs/generated/manifests/* @nrwl/nrwlians
+docs/generated/packages-metadata.json @FrozenPandaz @jaysoo @AgentEnder @nrwl/nx-docs-reviewers

CONTRIBUTING.md

@@ -12,34 +12,58 @@ Watch this 5-minute video:
 
 ## Got a Question?
 
-We are trying to keep GitHub issues for bug reports and feature requests. Using the `nrwl` tag on [Stack Overflow](https://stackoverflow.com/questions/tagged/nrwl) is a much better place to ask general questions about how to use Nx.
+We are trying to keep GitHub issues for bug reports and feature requests. Using the `nrwl` tag
+on [Stack Overflow](https://stackoverflow.com/questions/tagged/nrwl) is a much better place to ask general questions
+about how to use Nx.
 
 ## Found an Issue?
 
-If you find a bug in the source code or a mistake in the documentation, you can help us by [submitting an issue](https://github.com/nrwl/nx/blob/master/CONTRIBUTING.md#submit-issue) to [our GitHub Repository](https://github.com/nrwl/nx). Even better, you can [submit a Pull Request](https://github.com/nrwl/nx/blob/master/CONTRIBUTING.md#submit-pr) with a fix.
+If you find a bug in the source code or a mistake in the documentation, you can help us
+by [submitting an issue](https://github.com/nrwl/nx/blob/master/CONTRIBUTING.md#submit-issue)
+to [our GitHub Repository](https://github.com/nrwl/nx). Even better, you
+can [submit a Pull Request](https://github.com/nrwl/nx/blob/master/CONTRIBUTING.md#submit-pr) with a fix.
 
 ## Project Structure
 
 Source code and documentation are included in the top-level folders listed below.
 
-- `docs` - Markdown and configuration files for documentation including tutorials, guides for each supported platform, and API docs.
+- `docs` - Markdown and configuration files for documentation including tutorials, guides for each supported platform,
+  and API docs.
 - `e2e` - E2E tests.
-- `packages` - Source code for Nx packages such as Angular, React, Web, NestJS, Next and others including generators and executors (or builders).
+- `packages` - Source code for Nx packages such as Angular, React, Web, NestJS, Next and others including generators and
+  executors (or builders).
 - `scripts` - Miscellaneous scripts for project tasks such as building documentation, testing, and code formatting.
 - `tmp` - Folder used by e2e tests. If you are a WebStorm user, make sure to mark this folder as excluded.
 
+## Development Workstation Setup
+
+If you are using `VSCode`, and provided you have [Docker](https://docker.com) installed on your machine, then you can leverage [Dev Containers](https://containers.dev) through this [VSCode extension](https://marketplace.visualstudio.com/items?itemName=ms-vscode-remote.remote-containers), to easily setup your development environment, with everything needed to contribute to Nx, already installed (namely `NodeJS`, `Yarn`, `Rust`, `Cargo`, plus some useful extensions like `Nx Console`).
+
+To do so, simply:
+
+- Checkout the repo
+- Open it with VSCode
+- Open the [Command Palette](https://code.visualstudio.com/docs/getstarted/userinterface#_command-palette) and select "Dev Containers: Open Folder in Container..."
+
+The repo comes with a preconfigured `devcontainer.json` file (located in `.devcontainer/` folder at root), that `VSCode` will automatically use to install the aforementioned tools, inside a Docker image. It will even run `pnpm install` for you, so you can start contributing to Nx right after.
+
+If you open the repo in [Github Codespace](https://github.com/features/codespaces), it will also leverage this config file, to setup the codespace, with the same required tools.
+
 ## Building the Project
 
+> Nx uses Rust to build native bindings for Node. Please make sure that you have Rust installed via [rustup.rs](https://rustup.rs)
+> If you have VSCode + Docker, this can be automated for you, see [section](#development-workstation-setup) above
+
 After cloning the project to your machine, to install the dependencies, run:
 
 ```bash
-yarn
+pnpm i
 ```
 
 To build all the packages, run:
 
 ```bash
-yarn build
+pnpm build
 ```
 
 ## Publishing to a local registry
@@ -49,28 +73,50 @@ it can be useful to publish to a local registry.
 
 Check out [this video for a live walkthrough](https://youtu.be/Tx257WpNsxc) or follow the instructions below:
 
-```bash
-# Starts the local registry. Keep this running in a separate terminal.
-yarn local-registry start
-
-# Set npm and yarn to use the local registry.
-# Note: This reroutes your installs to your local registry
-yarn local-registry enable
-
-# Revert npm and yarn to use their default registries
-yarn local-registry disable
-```
-
-To publish packages to a local registry, do the following:
-
-- Run `yarn local-registry start` in Terminal 1 (keep it running)
-- Run `npm adduser --registry http://localhost:4873` in Terminal 2 (real credentials are not required, you just need to be logged in. You can use test/test/test@test.io.)
-- Run `yarn local-registry enable` in Terminal 2
-- Run `yarn nx-release 999.9.9 --local` in Terminal 2
+- Run `pnpm local-registry` in Terminal 1 (keep it running)
+- Run `npm adduser --registry http://localhost:4873` in Terminal 2 (real credentials are not required, you just need to
+  be logged in. You can use test/test/test@test.io.)
+- Run `pnpm nx-release 17.0.0 --local` in Terminal 2 - you can choose any nonexistent version number here, but it's recommended to use the next major
 - Run `cd ./tmp` in Terminal 2
-- Run `npx create-nx-workspace@999.9.9` in Terminal 2
+- Run `npx create-nx-workspace@17.0.0` in Terminal 2
 
-If you have problems publishing, make sure you use Node 14 and NPM 6 instead of Node 15 and NPM 7.
+If you have problems publishing, make sure you use Node 18 and NPM 8.
+
+**NOTE:** To use this newly published local version, you need to make a new workspace or change all of your target packages to this new version, eg: `"nx": "^17.0.0",` and re-run `pnpm i` in your testing project.
+
+### Publishing for Yarn 2+ (Berry)
+
+Yarn Berry operates slightly differently than Yarn Classic. In order to publish packages for Berry follow next steps:
+
+- Run `yarn set version berry` to switch to latest Yarn version.
+- Create `.yarnrc.yml` in root with following contents:
+
+  ```yml
+  nodeLinker: node-modules
+  npmRegistryServer: 'http://localhost:4873'
+  unsafeHttpWhitelist:
+    - localhost
+  ```
+
+- Run `pnpm local-registry` in Terminal 1 (keep it running)
+- If you are creating nx workspace outside of your nx repo, make sure to add npm registry info to your root yarnrc (
+  usually in ~/.yarnrc.yml). The file should look something like this:
+
+  ```yml
+  npmRegistries:
+    'https://registry.yarnpkg.com':
+      npmAuthToken: npm_******************
+  yarnPath: .yarn/releases/yarn-3.2.2.cjs
+  npmRegistryServer: 'http://localhost:4873'
+  unsafeHttpWhitelist:
+    - localhost
+  ```
+
+- Run `pnpm nx-release --local` in Terminal 2 to publish next minor version. If this version already exists, you can
+  bump the minor version in `lerna.json` to toggle the next minor. The output will report the version of published
+  packages.
+- Go to your target folder (e.g. `cd ./tmp`) in Terminal 2
+- Run `yarn dlx create-nx-workspace@123.4.5` in Terminal 2 (replace `123.4.5` with the version that got published).
 
 ### Running Unit Tests
 
@@ -88,30 +134,40 @@ nx test jest
 
 ### Running E2E Tests
 
-**Use Node 14 and NPM 6. E2E tests won't work on Node 15 and NPM 7.**
+**Use Node 18 and NPM 8. E2E tests won't work on Node 15 and NPM 7.**
 
 To make sure your changes do not break any E2E tests, run:
 
 ```bash
-nx e2e e2e-cli # or any other project here
+nx e2e e2e-vite # or any other project here
 ```
 
 Running E2E tests can take some time, so it is often useful to run a single test. To run a single suite of tests, run:
 
 ```bash
-nx e2e e2e-cli -t versions # I often add qqqq to my test name so I can use -t qqqq
+nx e2e e2e-vite -t versions # I often add qqqq to my test name so I can use -t qqqq
 ```
 
+Sometimes tests pass locally but they fail on the CI. To reproduce the CI environment and be able to debug the issue, run:
+
+```bash
+NX_VERBOSE_LOGGING=true CI=true SELECTED_PM=pnpm pnpm nx e2e e2e-vite --t="should do something is this test"
+```
+
+The above command sets verbose logging (this exposes stack traces and underlying errors), sets the defaults to be CI-like and sets Pnpm as the selected package manager.
+
 ### Developing on Windows
 
 To build Nx on Windows, you need to use WSL.
 
-- Run `yarn install` in WSL. Yarn will compile several dependencies. If you don't run `install` in WSL, they will be compiled for Windows.
+- Run `pnpm install` in WSL. Yarn will compile several dependencies. If you don't run `install` in WSL, they will be
+  compiled for Windows.
 - Run `nx affected --target=test` and other commands in WSL.
 
 ## Documentation Contributions
 
-We would love for you to contribute to our documentation as well! Please feel welcome to submit fixes or enhancements to our existing documentation pages and the `nx-dev` application in this repo.
+We would love for you to contribute to our documentation as well! Please feel welcome to submit fixes or enhancements to
+our existing documentation pages and the `nx-dev` application in this repo.
 
 ### Documentation Structure
 
@@ -119,28 +175,36 @@ We would love for you to contribute to our documentation as well! Please feel we
 
 Our documentation pages can be found within this repo under the `docs` directory.
 
-The `docs/map.json` file is considered our source of truth for our site's structure, and should be updated when adding a new page to our documentation to ensure that it is included in the documentation site. We also run automated scripts based on this `map.json` data to safeguard against common human errors that could break our site.
+The `docs/map.json` file is considered our source of truth for our site's structure, and should be updated when adding a
+new page to our documentation to ensure that it is included in the documentation site. We also run automated scripts
+based on this `map.json` data to safeguard against common human errors that could break our site.
 
 #### Nx-Dev Application
 
-Our public `nx.dev` documentation site is a [Next.js](https://nextjs.org/) application, that can be found in the `nx-dev` directory of this repo.
-The documentation site is consuming the `docs/` directly by copy-ing its content while deploying, so the website is always in sync and reflects the latest version of `docs/`.
+Our public `nx.dev` documentation site is a [Next.js](https://nextjs.org/) application, that can be found in
+the `nx-dev` directory of this repo.
+The documentation site is consuming the `docs/` directly by copy-ing its content while deploying, so the website is
+always in sync and reflects the latest version of `docs/`.
 
-Jump to [Running the Documentation Site Locally](#running-the-documentation-site-locally) to see how to preview your changes while serving.
+Jump to [Running the Documentation Site Locally](#running-the-documentation-site-locally) to see how to preview your
+changes while serving.
 
 ### Changing Generated API documentation
 
-`.md` files documenting the API for our CLI (including executor and generator API docs) are generated via the corresponding `schema.json` file for the given command.
+`.md` files documenting the API for our CLI (including executor and generator API docs) are generated via the
+corresponding `schema.json` file for the given command.
 
 After adjusting the `schema.json` file, `.md` files for these commands can be generated by running:
 
 ```bash
-yarn documentation
+pnpm documentation
 ```
 
-This will update the corresponding contents of the `docs` directory. These are generated automatically on push (via husky) as well.
+This will update the corresponding contents of the `docs` directory. These are generated automatically on push (via
+husky) as well.
 
-Note that adjusting the `schema.json` files will also affect the CLI manuals and Nx Console behavior, in addition to adjusting the docs.
+Note that adjusting the `schema.json` files will also affect the CLI manuals and Nx Console behavior, in addition to
+adjusting the docs.
 
 ### Running the Documentation Site Locally
 
@@ -154,7 +218,9 @@ You can then access the application locally at `localhost:4200`.
 
 #### Troubleshooting: `JavaScript heap out of memory`
 
-If you see an error that states: `FATAL ERROR: Reached heap limit Allocation failed - JavaScript heap out of memory`, you need to [increase the max memory size of V8's old memory section](https://nodejs.org/api/cli.html#--max-old-space-sizesize-in-megabytes):
+If you see an error that states: `FATAL ERROR: Reached heap limit Allocation failed - JavaScript heap out of memory`,
+you need
+to [increase the max memory size of V8's old memory section](https://nodejs.org/api/cli.html#--max-old-space-sizesize-in-megabytes):
 
 ```bash
 export NODE_OPTIONS="--max-old-space-size=4096"
@@ -164,25 +230,34 @@ After configuring this, try to run `npx nx serve nx-dev` again.
 
 ### PR Preview
 
-When submitting a PR, this repo will automatically generate a preview of the `nx-dev` application based on the contents of your pull request.
+When submitting a PR, this repo will automatically generate a preview of the `nx-dev` application based on the contents
+of your pull request.
 
-Once the preview site is launched, a comment will automatically be added to your PR with the link your PR's preview. To check your docs changes, make sure to select `Preview` from the version selection box of the site.
+Once the preview site is launched, a comment will automatically be added to your PR with the link your PR's preview. To
+check your docs changes, make sure to select `Preview` from the version selection box of the site.
 
 ## Submission Guidelines
 
 ### <a name="submit-issue"></a> Submitting an Issue
 
-Before you submit an issue, please search the issue tracker. An issue for your problem may already exist and has been resolved, or the discussion might inform you of workarounds readily available.
+Before you submit an issue, please search the issue tracker. An issue for your problem may already exist and has been
+resolved, or the discussion might inform you of workarounds readily available.
 
-We want to fix all the issues as soon as possible, but before fixing a bug we need to reproduce and confirm it. Having a reproducible scenario gives us wealth of important information without going back and forth with you requiring additional information, such as:
+We want to fix all the issues as soon as possible, but before fixing a bug we need to reproduce and confirm it. Having a
+reproducible scenario gives us wealth of important information without going back and forth with you requiring
+additional information, such as:
 
 - the output of `nx report`
-- `yarn.lock` or `package-lock.json`
+- `yarn.lock` or `package-lock.json` or `pnpm-lock.yaml`
 - and most importantly - a use-case that fails
 
-A minimal reproduction allows us to quickly confirm a bug (or point out a coding problem) as well as confirm that we are fixing the right problem.
+A minimal reproduction allows us to quickly confirm a bug (or point out a coding problem) as well as confirm that we are
+fixing the right problem.
 
-We will be insisting on a minimal reproduction in order to save maintainers' time and ultimately be able to fix more bugs. Interestingly, from our experience, users often find coding problems themselves while preparing a minimal reproduction repository. We understand that sometimes it might be hard to extract essentials bits of code from a larger codebase, but we really need to isolate the problem before we can fix it.
+We will be insisting on a minimal reproduction in order to save maintainers' time and ultimately be able to fix more
+bugs. Interestingly, from our experience, users often find coding problems themselves while preparing a minimal
+reproduction repository. We understand that sometimes it might be hard to extract essentials bits of code from a larger
+codebase, but we really need to isolate the problem before we can fix it.
 
 You can file new issues by filling out our [issue form](https://github.com/nrwl/nx/issues/new/choose).
 
@@ -192,16 +267,16 @@ Please follow the following guidelines:
 
 - Make sure unit tests pass (`nx affected --target=test`)
   - Target a specific project with: `nx run proj:test` (i.e. `nx run angular:test` to target `packages/angular`)
-  - Target a specific unit test file (i.e. `packages/angular/src/utils/ast-command-line-utils.spec.ts`) with `npx jest angular/src/utils/ast-utils` or `npx jest packages/angular/src/utils/ast-utils`
+  - Target a specific unit test file (i.e. `packages/angular/src/utils/ast-command-line-utils.spec.ts`)
+    with `npx jest angular/src/utils/ast-utils` or `npx jest packages/angular/src/utils/ast-utils`
   - For more options on running tests - check `npx jest --help` or visit [jestjs.io](https://jestjs.io/)
   - Debug with `node --inspect-brk ./node_modules/jest/bin/jest.js build/packages/angular/src/utils/ast-utils.spec.js`
-- Make sure e2e tests pass (this can take a while, so you can always let CI check those) (`yarn e2e`)
-  - Target a specific e2e test (i.e. `/build/e2e/cypress.test.js`) with `yarn e2e cypress`
-  - Debug with `node --inspect-brk ./node_modules/jest/bin/jest.js build/e2e/cypress.test.js`
-- Make sure you run `yarn format`
-- Update documentation with `yarn documentation`. For documentation, check for spelling and grammatical errors.
-- Update your commit message to follow the guidelines below (use `yarn commit` to automate compliance)
-  - `yarn check-commit` will check to make sure your commit messages are formatted correctly
+- Make sure e2e tests pass (this can take a while, so you can always let CI check those) (`nx affected --target=e2e`)
+  - Target a specific e2e test with `nx e2e e2e-cypress`
+- Make sure you run `nx format`
+- Update documentation with `pnpm documentation`. For documentation, check for spelling and grammatical errors.
+- Update your commit message to follow the guidelines below (use `pnpm commit` to automate compliance)
+  - `pnpm check-commit` will check to make sure your commit messages are formatted correctly
 
 #### Commit Message Guidelines
 
@@ -217,9 +292,12 @@ body
 
 The type must be one of the following:
 
-- feat - New or improved behavior being introduced (e.g. Updating to new versions of React or Jest which bring in new features)
-- fix - Fixes the current unexpected behavior to match expected behavior (e.g. Fixing the library generator to create the proper named project)
-- cleanup - Code Style changes that have little to no effect on the user (e.g. Refactoring some functions into a different file)
+- feat - New or improved behavior being introduced (e.g. Updating to new versions of React or Jest which bring in new
+  features)
+- fix - Fixes the current unexpected behavior to match expected behavior (e.g. Fixing the library generator to create
+  the proper named project)
+- cleanup - Code Style changes that have little to no effect on the user (e.g. Refactoring some functions into a
+  different file)
 - docs - Changes to the documentation (e.g. Adding more details into the getting started guide)
 - chore - Changes that have absolutely no effect on users (e.g. Updating the version of Nx used to build the repo)
 
@@ -228,29 +306,35 @@ The type must be one of the following:
 The scope must be one of the following:
 
 - angular - anything Angular specific
+- bundling - anything bundling specific (e.g. rollup, webpack, etc.)
 - core - anything Nx core specific
-- dep-graph - anything dep-graph app specific
 - detox - anything Detox specific
 - devkit - devkit-related changes
+- graph - anything graph app specific
+- expo - anything Expo specific
 - express - anything Express specific
-- js - anything related to @nrwl/js package or general js/ts support
+- js - anything related to @nx/js package or general js/ts support
 - linter - anything Linter specific
 - nest - anything Nest specific
 - nextjs - anything Next specific
-- nxdev - anything related to docs infrastructure
-- nx-plugin - anything Nx Plugin specific
 - node - anything Node specific
+- nx-cloud - anything NxCloud specific
+- nx-plugin - anything Nx Plugin specific
+- nx-dev - anything related to docs infrastructure
 - react - anything React specific
 - react-native - anything React Native specific
 - repo - anything related to managing the Nx repo itself
 - storybook - anything Storybook specific
 - testing - anything testing specific (e.g., Jest or Cypress)
+- vite - anything Vite specific
 - web - anything Web specific
+- webpack - anything Webpack specific
 - misc - misc stuff
 
 ##### Subject and Body
 
-The subject must contain a description of the change, and the body of the message contains any additional details to provide more context about the change.
+The subject must contain a description of the change, and the body of the message contains any additional details to
+provide more context about the change.
 
 Including the issue number that the PR relates to also helps with tracking.
 
@@ -267,4 +351,5 @@ Closes #157
 #### Commitizen
 
 To simplify and automate the process of committing with this format,
-**Nx is a [Commitizen](https://github.com/commitizen/cz-cli) friendly repository**, just do `git add` and execute `yarn commit`.
+**Nx is a [Commitizen](https://github.com/commitizen/cz-cli) friendly repository**, just do `git add` and
+execute `pnpm commit`.

Cargo.toml

@@ -0,0 +1,8 @@
+
+[workspace]
+members = [
+	'packages/nx'
+]
+
+[profile.release]
+lto = true

LICENSE

@@ -1,22 +1,22 @@
-(The MIT License)
-
-Copyright (c) 2017-2022 Narwhal Technologies Inc.
-
-Permission is hereby granted, free of charge, to any person obtaining
-a copy of this software and associated documentation files (the
-'Software'), to deal in the Software without restriction, including
-without limitation the rights to use, copy, modify, merge, publish,
-distribute, sublicense, and/or sell copies of the Software, and to
-permit persons to whom the Software is furnished to do so, subject to
-the following conditions:
-
-The above copyright notice and this permission notice shall be
-included in all copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED 'AS IS', WITHOUT WARRANTY OF ANY KIND,
-EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
-MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
-IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY
-CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
-TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE
-SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+(The MIT License)
+
+Copyright (c) 2017-2023 Narwhal Technologies Inc.
+
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of this software and associated documentation files (the
+'Software'), to deal in the Software without restriction, including
+without limitation the rights to use, copy, modify, merge, publish,
+distribute, sublicense, and/or sell copies of the Software, and to
+permit persons to whom the Software is furnished to do so, subject to
+the following conditions:
+
+The above copyright notice and this permission notice shall be
+included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED 'AS IS', WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
+IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY
+CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE
+SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

README.md

@@ -1,11 +1,15 @@
-<p style="text-align: center;"><img src="https://raw.githubusercontent.com/nrwl/nx/master/images/nx.png" 
-width="100%" alt="Nx - Smart, Fast and Extensible Build System"></p>
+<p style="text-align: center;">
+  <picture>
+    <source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/nrwl/nx/master/images/nx-dark.svg">
+    <img alt="Nx - Smart, Fast and Extensible Build System" src="https://raw.githubusercontent.com/nrwl/nx/master/images/nx-light.svg" width="100%">
+  </picture>
+</p>
 
 <div style="text-align: center;">
 
 [![CircleCI](https://circleci.com/gh/nrwl/nx.svg?style=svg)](https://circleci.com/gh/nrwl/nx)
-[![License](https://img.shields.io/npm/l/@nrwl/workspace.svg?style=flat-square)]()
-[![NPM Version](https://badge.fury.io/js/%40nrwl%2Fworkspace.svg)](https://www.npmjs.com/@nrwl/workspace)
+[![License](https://img.shields.io/npm/l/nx.svg?style=flat-square)]()
+[![NPM Version](https://badge.fury.io/js/nx.svg)](https://www.npmjs.com/package/nx)
 [![Semantic Release](https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg?style=flat-square)]()
 [![Commitizen friendly](https://img.shields.io/badge/commitizen-friendly-brightgreen.svg)](http://commitizen.github.io/cz-cli/)
 [![Join the chat at https://gitter.im/nrwl-nx/community](https://badges.gitter.im/nrwl-nx/community.svg)](https://gitter.im/nrwl-nx/community?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)
@@ -22,9 +26,9 @@ Nx is a next generation build system with first class monorepo support and power
 A few links to help you get started:
 
 - [Nx.Dev: Documentation, Guides, Interactive Tutorials](https://nx.dev)
-- [Nx.Dev: Core Tutorials](https://nx.dev/core-tutorial/01-create-blog)
-- [Tutorial: Adding Nx to an Existing Monorepo](https://nx.dev/migration/adding-to-monorepo)
-- [Official Nx YouTube Channel](https://www.youtube.com/c/Nrwl_io)
+- [Nx.Dev: Core Tutorials](https://nx.dev/getting-started/intro)
+- [Recipe: Adding Nx to an Existing Monorepo](https://nx.dev/recipes/adopting-nx/adding-to-monorepo)
+- [Official Nx YouTube Channel](https://www.youtube.com/@NxDevtools)
 - [Blog Posts About Nx](https://blog.nrwl.io/nx/home)
 
 <p style="text-align: center;"><a href="https://nx.dev/#learning-materials" target="_blank" rel="noreferrer"><img src="./images/nx-courses-and-videos.svg" 

community/approved-plugins.json

@@ -1,13 +1,43 @@
 [
   {
-    "name": "nx-plugins",
-    "description": "Nx plugin integrations with ESBuild / Vite / Snowpack / Prisma, with derived ESBuild / Snowpack / ... plugins.",
+    "name": "@ahryman40k/nx-vitepress",
+    "description": "Nx plugin add vitepress project to your workspace",
+    "url": "https://github.com/Ahryman40k/nx-vitepress/tree/main/packages/nx-vitepress"
+  },
+  {
+    "name": "@nightwatch/nx",
+    "description": "The NightwatchJS plugin allows your workspace to use the power of NightwatchJS for E2E and Component Testing on Desktop and Mobile",
+    "url": "https://github.com/nightwatchjs/nightwatch-plugin-nx/"
+  },
+  {
+    "name": "@nxkit/playwright",
+    "description": "The Playwright plugin allows your workspace to use the power of Playwright end-to-end testing",
+    "url": "https://github.com/nxkit/nxkit"
+  },
+  {
+    "name": "qwik-nx",
+    "description": "Get first class support for Qwik inside of Nx monorepos with Qwik optimized custom executors, generators and a vite plugin",
+    "url": "https://github.com/qwikifiers/qwik-nx"
+  },
+  {
+    "name": "@nxkit/style-dictionary",
+    "description": "Nx plugin to generate and build Style Dictionary projects inside your Nx workspace",
+    "url": "https://github.com/nxkit/nxkit"
+  },
+  {
+    "name": "nx-plugin-vite",
+    "description": "Nx plugin integrations with Vite.",
     "url": "https://nx-plugins.netlify.app/"
   },
   {
-    "name": "@codebrew/nx-aws-cdk",
-    "description": "An Nx plugin for aws cdk develop.",
-    "url": "https://github.com/codebrewlab/nx-plugins/tree/main/packages/nx-aws-cdk"
+    "name": "@ago-dev/nx-aws-cdk-v2",
+    "description": "An nx plugin for the aws-cdk v2.",
+    "url": "https://github.com/adrian-goe/nx-aws-cdk-v2"
+  },
+  {
+    "name": "@berenddeboer/nx-sst",
+    "description": "Nx plugin to generate an SST stack and execute all SST commands.",
+    "url": "https://github.com/berenddeboer/nx-plugins/tree/main/packages/nx-sst"
   },
   {
     "name": "@rxap/plugin-localazy",
@@ -25,35 +55,25 @@
     "url": "https://github.com/Phillip9587/nx-stylelint"
   },
   {
-    "name": "@nxtend/ionic-react",
+    "name": "@nxext/ionic-react",
     "description": "An Nx plugin for developing Ionic React applications and libraries",
-    "url": "https://github.com/nxtend-team/nxtend/tree/main/packages/ionic-react"
+    "url": "https://github.com/nxext/nx-extensions/tree/main/packages/ionic-react"
   },
   {
-    "name": "@nxtend/ionic-angular",
+    "name": "@nxext/ionic-angular",
     "description": "An Nx plugin for developing Ionic Angular applications and libraries",
-    "url": "https://github.com/nxtend-team/nxtend/tree/main/packages/ionic-angular"
+    "url": "https://github.com/nxext/nx-extensions/tree/main/packages/ionic-angular"
   },
   {
-    "name": "@nxtend/capacitor",
+    "name": "@nxext/capacitor",
     "description": "An Nx plugin for developing cross-platform applications using Capacitor",
-    "url": "https://github.com/nxtend-team/nxtend/tree/main/packages/capacitor"
-  },
-  {
-    "name": "@nxtend/firebase",
-    "description": "An Nx plugin for developing applications using Firebase",
-    "url": "https://github.com/nxtend-team/nxtend/tree/main/packages/firebase"
+    "url": "https://github.com/nxext/nx-extensions/tree/main/packages/capacitor"
   },
   {
     "name": "@angular-architects/ddd",
     "description": "Nx plugin for structuring a monorepo with domains and layers",
     "url": "https://github.com/angular-architects/nx-ddd-plugin"
   },
-  {
-    "name": "@offeringsolutions/nx-karma-to-jest",
-    "description": "Nx plugin for replacing karma with jest in an Nx workspace",
-    "url": "https://github.com/FabianGosebrink/nx-karma-to-jest"
-  },
   {
     "name": "@flowaccount/nx-serverless",
     "description": "Nx plugin for node/angular-universal schematics and deployment builders in an Nx workspace",
@@ -70,24 +90,9 @@
     "url": "https://github.com/Bielik20/nx-plugins/tree/master/packages/nx-jest-playwright"
   },
   {
-    "name": "@dev-thought/nx-deploy-it",
-    "description": "Nx plugin to deploy applications on your favorite cloud provider",
-    "url": "https://github.com/Dev-Thought/nx-plugins/tree/master/libs/nx-deploy-it"
-  },
-  {
-    "name": "@offeringsolutions/nx-protractor-to-cypress",
-    "description": "Nx plugin to replace protractor with cypress in an nx workspace",
-    "url": "https://github.com/FabianGosebrink/nx-protractor-to-cypress"
-  },
-  {
-    "name": "@nx-tools/nx-docker",
-    "description": "Nx plugin to build docker images of your affected apps",
-    "url": "https://github.com/gperdomor/nx-tools/tree/main/packages/nx-docker"
-  },
-  {
-    "name": "@angular-custom-builders/lite-serve",
-    "description": "Nx plugin to run the e2e test on an existing dist folder",
-    "url": "https://github.com/mauriziovitale/angular-plugins/tree/master/libs/lite-serve"
+    "name": "@ns3/nx-playwright",
+    "description": "Nx plugin to run playwright e2e tests in an Nx workspace",
+    "url": "https://github.com/Bielik20/nx-plugins/tree/master/packages/nx-playwright"
   },
   {
     "name": "@nx-plus/nuxt",
@@ -109,6 +114,16 @@
     "description": "Nx Plugin to integrate the generation of documentation with Compodoc in the Nx workflow",
     "url": "https://github.com/twittwer/nx-tools/tree/master/libs/compodoc#readme"
   },
+  {
+    "name": "@enio.ai/nx-install",
+    "description": "nx-install is a plugin for Nx workspaces to quickly setup custom install commands via npm.",
+    "url": "https://github.com/enio-ireland/enio/tree/develop/packages/nx-install#readme"
+  },
+  {
+    "name": "@enio.ai/typedoc",
+    "description": "typedoc is a plugin for Nx workspaces to quickly setup documentation automation on your projects using typedoc.",
+    "url": "https://github.com/enio-ireland/enio/tree/develop/packages/typedoc#readme"
+  },
   {
     "name": "@nxext/svelte",
     "description": "Nx plugin to use Svelte within nx workspaces",
@@ -129,16 +144,16 @@
     "description": "Nx plugin to use SolidJS within nx workspaces",
     "url": "https://github.com/nxext/nx-extensions/tree/master/packages/solid"
   },
-  {
-    "name": "@joelcode/gcp-function",
-    "description": "Nx plugin to generate, test, lint, build, serve, & deploy Google Cloud Function",
-    "url": "https://github.com/JoelCode/gcp-function"
-  },
   {
     "name": "@nx-go/nx-go",
     "description": "Nx plugin to use Go in a Nx workspace",
     "url": "https://github.com/nx-go/nx-go"
   },
+  {
+    "name": "@nx-golang/gin",
+    "description": "Nx plugin to use Go-Gin in a Nx workspace",
+    "url": "https://github.com/nx-golang/nx-golang"
+  },
   {
     "name": "@angular-architects/module-federation",
     "description": "Nx plugin to use webpack module federation",
@@ -180,12 +195,7 @@
     "url": "https://github.com/bikecoders/ngx-deploy-npm"
   },
   {
-    "name": "@trafilea/nx-shopify",
-    "description": "Nx plugin for developing performance-first Shopify themes",
-    "url": "https://github.com/trafilea/nx-shopify"
-  },
-  {
-    "name": "nx-dotnet",
+    "name": "@nx-dotnet/core",
     "description": "Nx plugin for developing and housing .NET projects within an Nx workspace.",
     "url": "https://github.com/nx-dotnet/nx-dotnet"
   },
@@ -231,19 +241,39 @@
   },
   {
     "name": "@nx-extend/e2e-runner",
-    "description": "Nx plugin that can start your API before running Cypress",
+    "description": "Nx plugin that can start your API before running Cypress/Playwright",
     "url": "https://github.com/tripss/nx-extend/tree/master/packages/e2e-runner"
   },
+  {
+    "name": "@nx-extend/vercel",
+    "description": "Nx plugin to deploy your apps to Vercel",
+    "url": "https://github.com/tripss/nx-extend/tree/master/packages/vercel"
+  },
+  {
+    "name": "@nx-extend/strapi",
+    "description": "Nx plugin for developing Strapi applications",
+    "url": "https://github.com/tripss/nx-extend/tree/master/packages/strapi"
+  },
+  {
+    "name": "@nx-extend/playwright",
+    "description": "Nx plugin to run playwright e2e tests in an Nx workspace",
+    "url": "https://github.com/tripss/nx-extend/tree/master/packages/playwright"
+  },
+  {
+    "name": "@nx-extend/terraform",
+    "description": "Nx plugin for deploying your resources with Terraform",
+    "url": "https://github.com/tripss/nx-extend/tree/master/packages/terraform"
+  },
+  {
+    "name": "@nx-extend/pulumi",
+    "description": "Nx plugin for deploying your resources with Pulumi",
+    "url": "https://github.com/tripss/nx-extend/tree/master/packages/pulumi"
+  },
   {
     "name": "@nativescript/nx",
     "description": "Nx Plugin adding first class support for NativeScript in your Nx workspace",
     "url": "https://github.com/nativescript/nx"
   },
-  {
-    "name": "@nx-clean/plugin-core",
-    "description": "Nx Plugin to generate projects following Clean Architecture practices",
-    "url": "https://github.com/guiseek/nx-clean/tree/main/libs/plugin/core"
-  },
   {
     "name": "@jnxplus/nx-boot-gradle",
     "description": "Nx plugin to add Spring Boot and Gradle multi-project builds support to Nx workspace",
@@ -277,11 +307,116 @@
   {
     "name": "@diogovcs/graphql-mesh",
     "description": "Nx plugin to add GraphQL Mesh integration to Nx Workspace.",
-    "url": "https://github.com/DiogoVCS/nx-graphql-mesh"
+    "url": "https://github.com/DiogoVCS/nx-workspace-plugins"
   },
   {
     "name": "@computas/nx-yarn",
     "description": "A plugin to help make nx with yarn a pleasant experience.",
     "url": "https://github.com/computas/nx-yarn"
+  },
+  {
+    "name": "@theunderscorer/nx-semantic-release",
+    "description": "Nx plugin for automated releases using semantic-release.",
+    "url": "https://github.com/TheUnderScorer/nx-semantic-release"
+  },
+  {
+    "name": "nx-pwm",
+    "description": "Nx plugin and CLI to help maintain packages, inspired by NX repo tooling",
+    "url": "https://github.com/gioragutt/nx-pwm"
+  },
+  {
+    "name": "@nxrocks/nx-micronaut",
+    "description": "Nx plugin to generate, run, package, build (and more) Micronaut projects inside your Nx workspace",
+    "url": "https://github.com/tinesoft/nxrocks/tree/master/packages/nx-micronaut"
+  },
+  {
+    "name": "@koliveira15/nx-sonarqube",
+    "description": "Nx plugin that analyses projects using SonarQube / SonarCloud.",
+    "url": "https://github.com/koliveira15/nx-sonarqube"
+  },
+  {
+    "name": "@mands/nx-playwright",
+    "description": "The Playwright plugin allows your workspace to use the power of Playwright end-to-end testing using a native runner.",
+    "url": "https://github.com/marksandspencer/nx-plugins/tree/main/packages/nx-playwright"
+  },
+  {
+    "name": "@diogovcs/stryker-mutator",
+    "description": "Nx plugin to add Stryker Mutator mutation tests to the Nx Workspace.",
+    "url": "https://github.com/DiogoVCS/nx-workspace-plugins"
+  },
+  {
+    "name": "@spaceribs/nx-web-ext",
+    "description": "Nx plugin that allows you to build, test and deploy web extensions.",
+    "url": "https://github.com/spaceribs/spaceribs/tree/main/packages/nx-web-ext"
+  },
+  {
+    "name": "@spaceribs/nx-betterer",
+    "description": "Nx plugin that applies betterer standards on a per-project basis.",
+    "url": "https://github.com/spaceribs/spaceribs/tree/main/packages/nx-betterer"
+  },
+  {
+    "name": "@nx-tools/nx-container",
+    "description": "Nx plugin to build OCI containers with Docker, Podman or Kaniko.",
+    "url": "https://github.com/gperdomor/nx-tools/tree/main/packages/nx-container"
+  },
+  {
+    "name": "@nxrocks/nx-melos",
+    "description": "Nx plugin adding first class support for Melos in your Nx workspace",
+    "url": "https://github.com/tinesoft/nxrocks/tree/master/packages/nx-melos"
+  },
+  {
+    "name": "@monodon/rust",
+    "description": "Adds Cargo and Rust support",
+    "url": "https://github.com/cammisuli/monodon/tree/main/packages/rust"
+  },
+  {
+    "name": "nx-mesh",
+    "description": "GraphQL Mesh support for Nx",
+    "url": "https://github.com/domjtalbot/nx-mesh"
+  },
+  {
+    "name": "@nxazure/func",
+    "description": "Nx plugin to add Azure Functions support to Nx Workspace.",
+    "url": "https://github.com/AlexPshul/nxazure/tree/master/packages/func"
+  },
+  {
+    "name": "@rbnx/webdriverio",
+    "description": "A Nx plugin that adds the WebdriverIO testing framework to a NX workspace.",
+    "url": "https://github.com/Roozenboom/rbnx/tree/main/packages/webdriverio"
+  },
+  {
+    "name": "nx-ngrok",
+    "description": "Ngrok support for Nx",
+    "url": "https://github.com/domjtalbot/nx-ngrok"
+  },
+  {
+    "name": "@nxrocks/nx-ktor",
+    "description": "Nx plugin to generate, run, package, build (and more) Ktor projects inside your Nx workspace",
+    "url": "https://github.com/tinesoft/nxrocks/tree/master/packages/nx-ktor"
+  },
+  {
+    "name": "nx-size-limit",
+    "description": "Adds size-limit support for Nx (performance budget tool for JavaScript)",
+    "url": "https://github.com/LironHazan/nx-size-limit"
+  },
+  {
+    "name": "@jnxplus/nx-quarkus-gradle",
+    "description": "Nx plugin to add Quarkus and Gradle multi-project builds support to Nx workspace",
+    "url": "https://github.com/khalilou88/jnxplus/tree/main/packages/nx-quarkus-gradle"
+  },
+  {
+    "name": "@jnxplus/nx-quarkus-maven",
+    "description": "Nx plugin to add Quarkus and Maven multi-module project support to Nx workspace",
+    "url": "https://github.com/khalilou88/jnxplus/tree/main/packages/nx-quarkus-maven"
+  },
+  {
+    "name": "@loft-orbital/terraform",
+    "description": "Terraform executors and generators",
+    "url": "https://github.com/loft-orbital/nx-plugins/tree/main/packages/terraform"
+  },
+  {
+    "name": "@nxlv/python",
+    "description": "Nx plugin designed to extend the Nx features to work with Python projects based on Poetry.",
+    "url": "https://github.com/lucasvieirasilva/nx-plugins/tree/main/packages/nx-python"
   }
 ]

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

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

dep-graph/client-e2e/cypress-watch-mode.json

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

dep-graph/client-e2e/cypress.json

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

dep-graph/client-e2e/project.json

@@ -1,49 +0,0 @@
-{
-  "$schema": "../../node_modules/nx/schemas/project-schema.json",
-  "sourceRoot": "dep-graph/client-e2e/src",
-  "projectType": "application",
-  "targets": {
-    "e2e-base": {
-      "executor": "@nrwl/cypress:cypress",
-      "options": {
-        "tsConfig": "dep-graph/client-e2e/tsconfig.e2e.json",
-        "baseUrl": "http://localhost:4200"
-      },
-      "configurations": {
-        "dev": {
-          "cypressConfig": "dep-graph/client-e2e/cypress.json",
-          "devServerTarget": "dep-graph-client:serve"
-        },
-        "watch": {
-          "cypressConfig": "dep-graph/client-e2e/cypress-watch-mode.json",
-          "devServerTarget": "dep-graph-client:serve:watch"
-        },
-        "release": {
-          "cypressConfig": "dep-graph/client-e2e/cypress-release.json",
-          "devServerTarget": "dep-graph-client:serve:release"
-        }
-      },
-      "defaultConfiguration": "dev"
-    },
-    "e2e": {
-      "executor": "nx:run-commands",
-      "outputs": [],
-      "options": {
-        "commands": [
-          "npx nx e2e-base e2e-dep-graph-client -c dev",
-          "npx nx e2e-base e2e-dep-graph-client -c watch",
-          "npx nx e2e-base e2e-dep-graph-client -c release"
-        ],
-        "parallel": false
-      }
-    },
-    "lint": {
-      "executor": "@nrwl/linter:eslint",
-      "outputs": ["{options.outputFile}"],
-      "options": {
-        "lintFilePatterns": ["dep-graph/client-e2e/**/*.ts"]
-      }
-    }
-  },
-  "implicitDependencies": ["dep-graph-client"]
-}

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

@@ -1,395 +0,0 @@
-import {
-  getCheckedProjectItems,
-  getDeselectAllButton,
-  getFocusButtonForProject,
-  getGroupByFolderCheckbox,
-  getImageDownloadButton,
-  getIncludeProjectsInPathButton,
-  getSearchDepthCheckbox,
-  getSearchDepthIncrementButton,
-  getSelectAffectedButton,
-  getSelectAllButton,
-  getSelectProjectsMessage,
-  getTextFilterInput,
-  getTextFilterReset,
-  getUncheckedProjectItems,
-  getUnfocusProjectButton,
-} from '../support/app.po';
-
-import * as nxExamplesJson from '../fixtures/nx-examples.json';
-import * as affectedJson from '../fixtures/affected.json';
-
-describe('dep-graph-client', () => {
-  before(() => {
-    cy.intercept('/assets/graphs/nx.json', { fixture: 'nx-examples.json' }).as(
-      'getGraph'
-    );
-    cy.visit('/');
-
-    // wait for initial graph to finish loading
-    cy.wait('@getGraph');
-  });
-
-  afterEach(() => {
-    // clean up by hiding all projects and clearing text input
-    getDeselectAllButton().click();
-    getTextFilterInput().clear();
-    getCheckedProjectItems().should('have.length', 0);
-  });
-
-  describe('select projects message', () => {
-    it('should display on load', () => {
-      getSelectProjectsMessage().should('be.visible');
-    });
-
-    it('should hide when a project is selected', () => {
-      cy.contains('cart').scrollIntoView().should('be.visible');
-      cy.get('[data-project="cart"]').should('be.visible');
-      cy.get('[data-project="cart"]').click({ force: true });
-      getSelectProjectsMessage().should('not.exist');
-    });
-  });
-
-  describe('text filter', () => {
-    it('should hide clear button initially', () => {
-      getTextFilterReset().should('not.exist');
-    });
-
-    it('should show clear button after typing', () => {
-      getTextFilterInput().type('cart');
-      getTextFilterReset().should('exist');
-    });
-
-    it('should clear selection on reset', () => {
-      getTextFilterInput().type('cart');
-      getCheckedProjectItems().should(
-        'have.length',
-        nxExamplesJson.projects.filter((project) =>
-          project.name.includes('cart')
-        ).length
-      );
-      getTextFilterReset().click();
-      getCheckedProjectItems().should('have.length', 0);
-    });
-
-    it('should hide clear button after clicking', () => {
-      getTextFilterInput().type('cart');
-      getTextFilterReset().click().should('not.exist');
-    });
-
-    it('should filter projects by text when pressing enter', () => {
-      getTextFilterInput().type('cart{enter}');
-
-      getCheckedProjectItems().should(
-        'have.length',
-        nxExamplesJson.projects.filter((project) =>
-          project.name.includes('cart')
-        ).length
-      );
-    });
-
-    it('should filter projects by text after debounce', () => {
-      getTextFilterInput().type('cart');
-      getCheckedProjectItems().should(
-        'have.length',
-        nxExamplesJson.projects.filter((project) =>
-          project.name.includes('cart')
-        ).length
-      );
-    });
-
-    it('should include projects in path when option is checked', () => {
-      getTextFilterInput().type('cart');
-      getIncludeProjectsInPathButton().click();
-
-      getCheckedProjectItems().should(
-        'have.length.gt',
-        nxExamplesJson.projects.filter((project) =>
-          project.name.includes('cart')
-        ).length
-      );
-    });
-  });
-
-  describe('select all button', () => {
-    it('should check all project items', () => {
-      getSelectAllButton().scrollIntoView().click({ force: true });
-      getCheckedProjectItems().should(
-        'have.length',
-        nxExamplesJson.projects.length
-      );
-    });
-  });
-
-  describe('deselect all button', () => {
-    it('should uncheck all project items', () => {
-      getDeselectAllButton().click();
-      getUncheckedProjectItems().should(
-        'have.length',
-        nxExamplesJson.projects.length
-      );
-      getSelectProjectsMessage().should('be.visible');
-    });
-  });
-
-  describe('show affected button', () => {
-    it('should be hidden initially', () => {
-      getSelectAffectedButton().should('not.exist');
-    });
-
-    it('should check all affected project items', () => {
-      cy.intercept('/assets/graphs/affected.json', {
-        fixture: 'affected.json',
-      }).as('getAffectedGraph');
-
-      cy.get('[data-cy=project-select]').select('Affected', { force: true });
-
-      cy.wait('@getAffectedGraph');
-      getSelectAffectedButton().click();
-
-      getCheckedProjectItems().should(
-        'have.length',
-        affectedJson.affected.length
-      );
-
-      // switch back to Nx Examples graph before proceeding
-      cy.intercept('/assets/graphs/nx-examples.json', {
-        fixture: 'nx-examples.json',
-      }).as('getGraph');
-      cy.get('[data-cy=project-select]').select('Nx Examples', { force: true });
-      cy.wait('@getGraph');
-    });
-  });
-
-  describe('selecting projects', () => {
-    it('should select a project by clicking on the project name', () => {
-      cy.get('[data-project="cart"]').should('have.data', 'active', false);
-      cy.get('[data-project="cart"]').click({
-        force: true,
-      });
-
-      cy.get('[data-project="cart"][data-active="true"]').should('exist');
-    });
-
-    it('should deselect a project by clicking on the project name again', () => {
-      cy.get('[data-project="cart"]').click({
-        force: true,
-      });
-
-      cy.get('[data-project="cart"][data-active="true"]')
-        .should('exist')
-        .click({
-          force: true,
-        });
-      cy.get('[data-project="cart"][data-active="false"]').should('exist');
-    });
-
-    it('should select a project by clicking on the selected icon', () => {
-      cy.get('[data-project="cart"][data-active="false"]').click({
-        force: true,
-      });
-      cy.get('[data-project="cart"][data-active="true"]')
-        .should('exist')
-        .parent()
-        .siblings()
-        .first()
-        .should('exist')
-        .click({
-          force: true,
-        });
-      cy.get('[data-project="cart"][data-active="false"]').should('exist');
-    });
-  });
-
-  describe('focusing projects in sidebar', () => {
-    it('should select appropriate projects', () => {
-      cy.contains('cart').scrollIntoView().should('be.visible');
-      getFocusButtonForProject('cart').click({ force: true });
-
-      const dependencies = nxExamplesJson.dependencies.cart;
-      const dependents = Object.keys(nxExamplesJson.dependencies).filter(
-        (key) =>
-          nxExamplesJson.dependencies[key]
-            .map((dependencies) => dependencies.target)
-            .includes('cart')
-      );
-      getCheckedProjectItems().should(
-        'have.length',
-        ['cart', ...dependencies, ...dependents].length
-      );
-    });
-  });
-
-  describe('unfocus button', () => {
-    it('should uncheck all project items', () => {
-      getFocusButtonForProject('cart').click({ force: true });
-      getUnfocusProjectButton().click();
-
-      getCheckedProjectItems().should('have.length', 0);
-    });
-  });
-
-  describe('image download button', () => {
-    it('should be hidden initally', () => {
-      getImageDownloadButton().should('have.class', 'opacity-0');
-    });
-
-    it('should be shown when a project is selected', () => {
-      cy.get('[data-project="cart"]').click({ force: true });
-      getImageDownloadButton().should('not.have.class', 'opacity-0');
-    });
-
-    it('should be hidden when no more projects are selected', () => {
-      cy.get('[data-project="cart"]').click({ force: true });
-      getDeselectAllButton().click();
-      getImageDownloadButton().should('have.class', 'opacity-0');
-    });
-  });
-
-  describe('setting url params', () => {
-    it('should set focused project', () => {
-      cy.contains('cart').scrollIntoView().should('be.visible');
-      getFocusButtonForProject('cart').click({ force: true });
-
-      cy.url().should('contain', 'focus=cart');
-    });
-
-    it('should set group by folder', () => {
-      getGroupByFolderCheckbox().click();
-
-      cy.url().should('contain', 'groupByFolder=true');
-    });
-
-    it('should set search depth disabled', () => {
-      // it's on by default, clicking should disable it
-      getSearchDepthCheckbox().click();
-
-      cy.url().should('contain', 'searchDepth=0');
-    });
-
-    it('should set search depth if greater than 1', () => {
-      // it's on by default and set to 1, clicking should change it to 2
-      getSearchDepthIncrementButton().click();
-
-      cy.url().should('contain', 'searchDepth=2');
-    });
-
-    it('should set select to all', () => {
-      getSelectAllButton().click();
-
-      cy.url().should('contain', 'select=all');
-    });
-  });
-});
-
-describe('loading dep-graph client with url params', () => {
-  beforeEach(() => {
-    cy.intercept('/assets/graphs/*', { fixture: 'nx-examples.json' }).as(
-      'getGraph'
-    );
-  });
-
-  it('should focus projects', () => {
-    cy.visit('/?focus=cart');
-
-    // wait for first graph to finish loading
-    cy.wait('@getGraph');
-
-    const dependencies = nxExamplesJson.dependencies.cart;
-    const dependents = Object.keys(nxExamplesJson.dependencies).filter((key) =>
-      nxExamplesJson.dependencies[key]
-        .map((dependencies) => dependencies.target)
-        .includes('cart')
-    );
-    getCheckedProjectItems().should(
-      'have.length',
-      ['cart', ...dependencies, ...dependents].length
-    );
-  });
-
-  it('should focus projects with search depth', () => {
-    cy.visit('/?focus=cart&searchDepth=2');
-
-    // wait for first graph to finish loading
-    cy.wait('@getGraph');
-
-    getCheckedProjectItems().should('have.length', 10);
-    getSearchDepthCheckbox().should('exist');
-  });
-
-  it('should focus projects with search depth disabled', () => {
-    cy.visit('/?focus=cart&searchDepth=0');
-
-    // wait for first graph to finish loading
-    cy.wait('@getGraph');
-
-    getCheckedProjectItems().should('have.length', 12);
-    getSearchDepthCheckbox().should('exist');
-  });
-
-  it('should set group by folder', () => {
-    cy.visit('/?focus=nx-dev&searchDepth=1&groupByFolder=true');
-
-    // wait for first graph to finish loading
-    cy.wait('@getGraph');
-
-    getGroupByFolderCheckbox().should('be.checked');
-  });
-
-  it('should select all projects', () => {
-    cy.visit('/?select=all');
-
-    // wait for first graph to finish loading
-    cy.wait('@getGraph');
-
-    getCheckedProjectItems().should(
-      'have.length',
-      nxExamplesJson.projects.length
-    );
-  });
-});
-
-describe('theme preferences', () => {
-  let systemTheme: string;
-  before(() => {
-    cy.visit('/');
-    systemTheme = window.matchMedia('(prefers-color-scheme: dark)').matches
-      ? 'dark'
-      : 'light';
-  });
-
-  it('should initialize localstorage with default theme', () => {
-    expect(localStorage.getItem('nx-dep-graph-theme')).eq('system');
-  });
-
-  it('has system default theme', () => {
-    cy.log('system theme is:', systemTheme);
-    cy.get('html').should('have.class', systemTheme);
-  });
-
-  describe('dark theme is set as prefered', () => {
-    before(() => {
-      cy.get('[data-cy="theme-open-modal-button"]').click();
-      cy.get('[data-cy="dark-theme-button"]').click();
-    });
-
-    it('should set dark theme', () => {
-      cy.log('Localstorage is: ', localStorage.getItem('nx-dep-graph-theme'));
-      expect(localStorage.getItem('nx-dep-graph-theme')).eq('dark');
-      cy.get('html').should('have.class', 'dark');
-    });
-  });
-
-  describe('light theme is set as preferred', () => {
-    before(() => {
-      cy.get('[data-cy="theme-open-modal-button"]').click();
-      cy.get('[data-cy="light-theme-button"]').click();
-    });
-
-    it('should set light theme', () => {
-      cy.log('Localstorage is: ', localStorage.getItem('nx-dep-graph-theme'));
-      expect(localStorage.getItem('nx-dep-graph-theme')).eq('light');
-      cy.get('html').should('have.class', 'light');
-    });
-  });
-});

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

@@ -1,20 +0,0 @@
-// ***********************************************************
-// 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
-};

dep-graph/client-e2e/src/release-integration/release.spec.ts

@@ -1,18 +0,0 @@
-describe('dep-graph-client release', () => {
-  beforeEach(() => {
-    cy.intercept('/assets/graphs/*').as('getGraph');
-
-    cy.visit('/');
-
-    // wait for first graph to finish loading
-    cy.wait('@getGraph');
-  });
-
-  it('should not display experimental features', () => {
-    cy.get('experimental-features').should('not.exist');
-  });
-
-  it('should not display the debugger', () => {
-    cy.get('debugger-panel').should('not.exist');
-  });
-});

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

@@ -1,34 +0,0 @@
-export const getSelectProjectsMessage = () => cy.get('#no-projects-chosen');
-export const getGraph = () => cy.get('#graph-container');
-export const getSelectAllButton = () => cy.get('[data-cy=selectAllButton]');
-export const getDeselectAllButton = () => cy.get('[data-cy=deselectAllButton]');
-export const getSelectAffectedButton = () => cy.get('[data-cy=affectedButton]');
-
-export const getUnfocusProjectButton = () => cy.get('[data-cy=unfocusButton]');
-
-export const getProjectItems = () => cy.get('[data-project]');
-
-export const getCheckedProjectItems = () => cy.get('[data-active="true"]');
-export const getUncheckedProjectItems = () => cy.get('[data-active="false"]');
-
-export const getGroupByFolderCheckbox = () =>
-  cy.get('input[name=displayOptions][value=groupByFolder]');
-
-export const getSearchDepthCheckbox = () =>
-  cy.get('input[name=depthFilter][value=depthFilterActivated]');
-export const getTextFilterInput = () => cy.get('[data-cy=textFilterInput]');
-export const getTextFilterReset = () => cy.get('[data-cy=textFilterReset]');
-
-export const getSearchDepthDecrementButton = () =>
-  cy.get('[data-cy=decrement-depth-filter]');
-export const getSearchDepthIncrementButton = () =>
-  cy.get('[data-cy=increment-depth-filter]');
-
-export const getIncludeProjectsInPathButton = () =>
-  cy.get('input[name=textFilterCheckbox]');
-
-export const getImageDownloadButton = () =>
-  cy.get('[data-cy=downloadImageButton]');
-
-export const getFocusButtonForProject = (projectName: string) =>
-  cy.get(`[data-cy="focus-button-${projectName}"]`);

dep-graph/client-e2e/src/watch-mode-integration/watch-mode.spec.ts

@@ -1,71 +0,0 @@
-import { getProjectItems } from '../support/app.po';
-
-describe('dep-graph-client in watch mode', () => {
-  beforeEach(() => {
-    cy.clock();
-    cy.visit('/');
-    cy.tick(2000);
-  });
-
-  it('should auto-select new libs as they are created', () => {
-    const excludedValues = ['existing-app-1', 'existing-lib-1'];
-
-    cy.tick(5000);
-    checkSelectedProjects(3, excludedValues);
-
-    cy.tick(5000);
-    checkSelectedProjects(4, excludedValues);
-
-    cy.tick(5000);
-    checkSelectedProjects(5, excludedValues);
-  });
-
-  // TODO: This test is getting flaky but was fixed by increasing the tick time between checks
-  // Figure out a better way to test this
-  it('should retain selected projects as new libs are created', () => {
-    cy.get('[data-project="existing-app-1"]').click();
-    cy.get('[data-project="existing-lib-1"]').click();
-
-    cy.tick(6000);
-
-    checkSelectedProjects(3, []);
-
-    cy.tick(6000);
-    checkSelectedProjects(4, []);
-
-    cy.tick(6000);
-    checkSelectedProjects(5, []);
-  });
-
-  it('should not re-add new libs if they were un-selected', () => {
-    cy.tick(5000);
-    cy.get('[data-project*="3"][data-active="true"]')
-      .should('exist')
-      .click({ force: true });
-
-    cy.get('[data-project*="3"][data-active="false"]').should('exist');
-
-    cy.tick(5000);
-    cy.tick(5000);
-
-    cy.get('[data-project*="3"]')
-      .first()
-      .should((project) => {
-        expect(project.data('active')).to.be.false;
-      });
-  });
-});
-
-function checkSelectedProjects(
-  expectedNumberOfProjects: number,
-  excludedProjects: string[]
-) {
-  getProjectItems().should((projects) => {
-    expect(projects.length).to.equal(expectedNumberOfProjects);
-    projects.each(function () {
-      if (!excludedProjects.includes(this.dataset.project)) {
-        expect(this.dataset.active).to.eq('true');
-      }
-    });
-  });
-}

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

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

dep-graph/client-e2e/tsconfig.json

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

dep-graph/client/.babelrc

@@ -1,11 +0,0 @@
-{
-  "presets": [
-    [
-      "@nrwl/react/babel",
-      {
-        "runtime": "automatic"
-      }
-    ]
-  ],
-  "plugins": []
-}

dep-graph/client/.eslintrc.json

@@ -1,26 +0,0 @@
-{
-  "extends": ["plugin:@nrwl/nx/react", "../../.eslintrc.json"],
-  "ignorePatterns": ["!**/*"],
-  "rules": {
-    "@typescript-eslint/no-implicit-any": "off"
-  },
-  "overrides": [
-    {
-      "files": ["*.ts", "*.tsx", "*.js", "*.jsx"],
-      "rules": {
-        "no-restricted-imports": [
-          "error",
-          { "paths": ["rxjs"], "patterns": ["rxjs/*"] }
-        ]
-      }
-    },
-    {
-      "files": ["*.ts", "*.tsx"],
-      "rules": {}
-    },
-    {
-      "files": ["*.js", "*.jsx"],
-      "rules": {}
-    }
-  ]
-}

dep-graph/client/jest.config.ts

@@ -1,18 +0,0 @@
-// nx-ignore-next-line
-const nxPreset = require('@nrwl/jest/preset').default;
-
-export default {
-  ...nxPreset,
-  displayName: 'dep-graph-client',
-  transform: {
-    '^(?!.*\\.(js|jsx|ts|tsx|css|json)$)': '@nrwl/react/plugins/jest',
-    '^.+\\.[tj]sx?$': ['babel-jest', { presets: ['@nrwl/next/babel'] }],
-  },
-  moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx'],
-  coverageDirectory: '../../coverage/nx-dev/nx-dev',
-  // The mock for widnow.matchMedia has to be in a separete file and imported before the components to test
-  // for more info check : // https://jestjs.io/docs/manual-mocks#mocking-methods-which-are-not-implemented-in-jsdom
-  modulePathIgnorePatterns: [
-    '/dep-graph/client/src/app/machines/match-media-mock.spec.ts',
-  ],
-};

dep-graph/client/postcss.config.js

@@ -1,8 +0,0 @@
-module.exports = {
-  plugins: {
-    tailwindcss: {
-      config: './dep-graph/client/tailwind.config.js',
-    },
-    autoprefixer: {},
-  },
-};

dep-graph/client/project.json

@@ -1,120 +0,0 @@
-{
-  "$schema": "../../node_modules/nx/schemas/project-schema.json",
-  "sourceRoot": "dep-graph/client/src",
-  "projectType": "application",
-  "targets": {
-    "build-base": {
-      "executor": "@nrwl/web:webpack",
-      "options": {
-        "maxWorkers": 8,
-        "outputPath": "build/apps/dep-graph",
-        "index": "dep-graph/client/src/index.html",
-        "main": "dep-graph/client/src/main.tsx",
-        "polyfills": "dep-graph/client/src/polyfills.ts",
-        "tsConfig": "dep-graph/client/tsconfig.app.json",
-        "styles": ["dep-graph/client/src/styles.scss"],
-        "scripts": [],
-        "assets": [],
-        "webpackConfig": "dep-graph/client/webpack.config.js",
-        "optimization": false,
-        "outputHashing": "none",
-        "sourceMap": true,
-        "extractCss": true,
-        "namedChunks": false,
-        "extractLicenses": false,
-        "vendorChunk": true,
-        "budgets": [
-          {
-            "type": "initial",
-            "maximumWarning": "2mb",
-            "maximumError": "5mb"
-          }
-        ]
-      },
-      "configurations": {
-        "dev": {
-          "assets": [
-            "dep-graph/client/src/favicon.ico",
-            "dep-graph/client/src/assets/graphs/",
-            {
-              "input": "dep-graph/client/src/assets/dev",
-              "output": "/",
-              "glob": "environment.js"
-            }
-          ]
-        },
-        "release": {
-          "assets": [
-            "dep-graph/client/src/favicon.ico",
-            {
-              "input": "dep-graph/client/src/assets/graphs",
-              "output": "/assets/graphs",
-              "glob": "nx-examples.json"
-            },
-            {
-              "input": "dep-graph/client/src/assets/release",
-              "output": "/",
-              "glob": "environment.js"
-            }
-          ],
-          "optimization": true,
-          "sourceMap": false,
-          "extractCss": true,
-          "namedChunks": false,
-          "extractLicenses": true,
-          "vendorChunk": false,
-          "budgets": [
-            {
-              "type": "initial",
-              "maximumWarning": "2mb",
-              "maximumError": "5mb"
-            }
-          ]
-        },
-        "watch": {
-          "assets": [
-            "dep-graph/client/src/favicon.ico",
-            {
-              "input": "dep-graph/client/src/assets/watch",
-              "output": "/",
-              "glob": "environment.js"
-            }
-          ]
-        }
-      },
-      "defaultConfiguration": "release",
-      "outputs": ["{options.outputPath}"]
-    },
-    "serve": {
-      "executor": "@nrwl/web:dev-server",
-      "configurations": {
-        "dev": {
-          "buildTarget": "dep-graph-client:build-base:dev"
-        },
-        "release": {
-          "buildTarget": "dep-graph-client:build-base:release"
-        },
-        "watch": {
-          "buildTarget": "dep-graph-client:build-base:watch"
-        }
-      },
-      "defaultConfiguration": "dev"
-    },
-    "lint": {
-      "executor": "@nrwl/linter:eslint",
-      "outputs": ["{options.outputFile}"],
-      "options": {
-        "lintFilePatterns": ["dep-graph/client/**/*.{ts,tsx,js,jsx}"]
-      }
-    },
-    "test": {
-      "executor": "@nrwl/jest:jest",
-      "outputs": ["coverage/dep-graph/client"],
-      "options": {
-        "jestConfig": "dep-graph/client/jest.config.ts",
-        "passWithNoTests": true
-      }
-    }
-  },
-  "tags": []
-}

dep-graph/client/src/app/app.tsx

@@ -1,15 +0,0 @@
-import { Shell } from './shell';
-import { GlobalStateProvider } from './state.provider';
-import { themeInit } from './theme-resolver';
-
-themeInit();
-
-export function App() {
-  return (
-    <GlobalStateProvider>
-      <Shell></Shell>
-    </GlobalStateProvider>
-  );
-}
-
-export default App;

dep-graph/client/src/app/debugger-panel.tsx

@@ -1,51 +0,0 @@
-import { memo } from 'react';
-import { ProjectGraphList } from './interfaces';
-import { GraphPerfReport } from './machines/interfaces';
-
-export interface DebuggerPanelProps {
-  projectGraphs: ProjectGraphList[];
-  selectedProjectGraph: string;
-  projectGraphChange: (projectName: string) => void;
-  lastPerfReport: GraphPerfReport;
-}
-
-export const DebuggerPanel = memo(function ({
-  projectGraphs,
-  selectedProjectGraph,
-  projectGraphChange,
-  lastPerfReport,
-}: DebuggerPanelProps) {
-  return (
-    <div
-      data-cy="debugger-panel"
-      className="flex-column flex w-auto items-center items-center justify-items-center justify-items-center gap-4 border-b border-slate-900/10 bg-slate-50 p-4 transition-all dark:border-slate-300/10 dark:bg-transparent"
-    >
-      <h4 className="dark:text-sidebar-title-dark mr-4 text-lg font-normal">
-        Debugger
-      </h4>
-      <select
-        className="flex w-auto items-center rounded-md rounded-md border border-slate-300 bg-white px-4 py-2 text-sm font-medium text-slate-700 shadow-sm hover:bg-slate-50 dark:border-slate-600 dark:bg-slate-800 dark:text-slate-300 hover:dark:bg-slate-700"
-        data-cy="project-select"
-        onChange={(event) => projectGraphChange(event.target.value)}
-        value={selectedProjectGraph}
-      >
-        {projectGraphs.map((projectGraph) => {
-          return (
-            <option key={projectGraph.id} value={projectGraph.id}>
-              {projectGraph.label}
-            </option>
-          );
-        })}
-      </select>
-      <p className="text-sm">
-        Last render took {lastPerfReport.renderTime}ms:{' '}
-        <b className="text-medium font-mono">{lastPerfReport.numNodes} nodes</b>{' '}
-        |{' '}
-        <b className="text-medium font-mono">{lastPerfReport.numEdges} edges</b>
-        .
-      </p>
-    </div>
-  );
-});
-
-export default DebuggerPanel;

dep-graph/client/src/app/edge-tooltip.tsx

@@ -1,39 +0,0 @@
-export interface EdgeNodeTooltipProps {
-  type: 'static' | 'dynamic' | 'implicit';
-  source: string;
-  target: string;
-  fileDependencies: Array<{ fileName: string }>;
-}
-function EdgeNodeTooltip({
-  type,
-  source,
-  target,
-  fileDependencies,
-}: EdgeNodeTooltipProps) {
-  return (
-    <div>
-      <h4 className={type !== 'implicit' ? 'mb-3' : ''}>
-        <span className="tag">{type ?? 'unknown'}</span>
-        {source} &rarr; {target}
-      </h4>
-      {type !== 'implicit' ? (
-        <div className="overflow-hidden rounded-md border border-slate-200 dark:border-slate-800">
-          <div className="bg-slate-50 px-4 py-2 text-xs font-medium uppercase text-slate-500 dark:bg-slate-800 dark:text-slate-400">
-            <span>Files</span>
-          </div>
-          <ul className="max-h-[300px] divide-y divide-slate-200 overflow-auto dark:divide-slate-800">
-            {fileDependencies.map((fileDep) => (
-              <li className="whitespace-nowrap px-4 py-2 text-sm font-medium text-slate-800 dark:text-slate-300">
-                <span className="block truncate font-normal">
-                  {fileDep.fileName}
-                </span>
-              </li>
-            ))}
-          </ul>
-        </div>
-      ) : null}
-    </div>
-  );
-}
-
-export default EdgeNodeTooltip;

dep-graph/client/src/app/experimental-feature.tsx

@@ -1,11 +0,0 @@
-import { useEnvironmentConfig } from './hooks/use-environment-config';
-
-function ExperimentalFeature(props) {
-  const environment = useEnvironmentConfig();
-  const showExperimentalFeatures =
-    environment.appConfig.showExperimentalFeatures;
-
-  return showExperimentalFeatures ? props.children : null;
-}
-
-export default ExperimentalFeature;

dep-graph/client/src/app/fetch-project-graph-service.ts

@@ -1,21 +0,0 @@
-// nx-ignore-next-line
-import type { DepGraphClientResponse } from 'nx/src/command-line/dep-graph';
-import { ProjectGraphService } from './interfaces';
-
-export class FetchProjectGraphService implements ProjectGraphService {
-  async getHash(): Promise<string> {
-    const request = new Request('currentHash', { mode: 'no-cors' });
-
-    const response = await fetch(request);
-
-    return response.json();
-  }
-
-  async getProjectGraph(url: string): Promise<DepGraphClientResponse> {
-    const request = new Request(url, { mode: 'no-cors' });
-
-    const response = await fetch(request);
-
-    return response.json();
-  }
-}

dep-graph/client/src/app/hooks/use-dep-graph-selector.ts

@@ -1,11 +0,0 @@
-import { useSelector } from '@xstate/react';
-import { DepGraphState } from '../machines/interfaces';
-import { useDepGraphService } from './use-dep-graph';
-
-export type DepGraphSelector<T> = (depGraphState: DepGraphState) => T;
-
-export function useDepGraphSelector<T>(selectorFunc: DepGraphSelector<T>): T {
-  const depGraphService = useDepGraphService();
-
-  return useSelector<typeof depGraphService, T>(depGraphService, selectorFunc);
-}

dep-graph/client/src/app/hooks/use-dep-graph.ts

@@ -1,8 +0,0 @@
-import { useContext } from 'react';
-import { GlobalStateContext } from '../state.provider';
-
-export function useDepGraphService() {
-  const globalState = useContext(GlobalStateContext);
-
-  return globalState;
-}

dep-graph/client/src/app/hooks/use-environment-config.ts

@@ -1,30 +0,0 @@
-// nx-ignore-next-line
-import type { DepGraphClientResponse } from 'nx/src/command-line/dep-graph';
-import { useRef } from 'react';
-import { AppConfig } from '../interfaces';
-
-export function useEnvironmentConfig(): {
-  exclude: string[];
-  watch: boolean;
-  localMode: 'serve' | 'build';
-  projectGraphResponse?: DepGraphClientResponse;
-  environment: 'dev' | 'watch' | 'release';
-  appConfig: AppConfig;
-  useXstateInspect: boolean;
-} {
-  const environmentConfig = useRef(getEnvironmentConfig());
-
-  return environmentConfig.current;
-}
-
-export function getEnvironmentConfig() {
-  return {
-    exclude: window.exclude,
-    watch: window.watch,
-    localMode: window.localMode,
-    projectGraphResponse: window.projectGraphResponse,
-    environment: window.environment,
-    appConfig: window.appConfig,
-    useXstateInspect: window.useXstateInspect,
-  };
-}

dep-graph/client/src/app/hooks/use-project-graph-data-service.ts

@@ -1,24 +0,0 @@
-import { FetchProjectGraphService } from '../fetch-project-graph-service';
-import { ProjectGraphService } from '../interfaces';
-import { LocalProjectGraphService } from '../local-project-graph-service';
-import { MockProjectGraphService } from '../mock-project-graph-service';
-
-let projectGraphService: ProjectGraphService;
-
-export function useProjectGraphDataService() {
-  if (projectGraphService === undefined) {
-    if (window.environment === 'dev') {
-      projectGraphService = new FetchProjectGraphService();
-    } else if (window.environment === 'watch') {
-      projectGraphService = new MockProjectGraphService();
-    } else if (window.environment === 'release') {
-      if (window.localMode === 'build') {
-        projectGraphService = new LocalProjectGraphService();
-      } else {
-        projectGraphService = new FetchProjectGraphService();
-      }
-    }
-  }
-
-  return projectGraphService;
-}

dep-graph/client/src/app/interfaces.ts

@@ -1,28 +0,0 @@
-// nx-ignore-next-line
-import type { DepGraphClientResponse } from 'nx/src/command-line/dep-graph';
-
-export interface ProjectGraphList {
-  id: string;
-  label: string;
-  url: string;
-}
-
-export interface WorkspaceLayout {
-  libsDir: string;
-  appsDir: string;
-}
-
-export interface ProjectGraphService {
-  getHash: () => Promise<string>;
-  getProjectGraph: (url: string) => Promise<DepGraphClientResponse>;
-}
-export interface Environment {
-  environment: 'dev' | 'watch' | 'release';
-}
-
-export interface AppConfig {
-  showDebugger: boolean;
-  showExperimentalFeatures: boolean;
-  projectGraphs: ProjectGraphList[];
-  defaultProjectGraph: string;
-}

dep-graph/client/src/app/local-project-graph-service.ts

@@ -1,13 +0,0 @@
-// nx-ignore-next-line
-import type { DepGraphClientResponse } from 'nx/src/command-line/dep-graph';
-import { ProjectGraphService } from './interfaces';
-
-export class LocalProjectGraphService implements ProjectGraphService {
-  async getHash(): Promise<string> {
-    return new Promise((resolve) => resolve('some-hash'));
-  }
-
-  async getProjectGraph(url: string): Promise<DepGraphClientResponse> {
-    return new Promise((resolve) => resolve(window.projectGraphResponse));
-  }
-}

dep-graph/client/src/app/machines/dep-graph.machine.ts

@@ -1,430 +0,0 @@
-import { assign } from '@xstate/immer';
-import { Machine, send, spawn } from 'xstate';
-import { customSelectedStateConfig } from './custom-selected.state';
-import { focusedStateConfig } from './focused.state';
-import { graphActor } from './graph.actor';
-import {
-  DepGraphContext,
-  DepGraphSchema,
-  DepGraphUIEvents,
-} from './interfaces';
-import { createRouteMachine } from './route-setter.machine';
-import { textFilteredStateConfig } from './text-filtered.state';
-import { tracingStateConfig } from './tracing.state';
-import { unselectedStateConfig } from './unselected.state';
-
-export const initialContext: DepGraphContext = {
-  projects: [],
-  dependencies: {},
-  affectedProjects: [],
-  selectedProjects: [],
-  focusedProject: null,
-  textFilter: '',
-  includePath: false,
-  searchDepth: 1,
-  searchDepthEnabled: true,
-  groupByFolder: false,
-  collapseEdges: false,
-  workspaceLayout: {
-    libsDir: '',
-    appsDir: '',
-  },
-  graphActor: null,
-  routeSetterActor: null,
-  routeListenerActor: null,
-  lastPerfReport: {
-    numEdges: 0,
-    numNodes: 0,
-    renderTime: 0,
-  },
-  tracing: {
-    start: null,
-    end: null,
-    algorithm: 'shortest',
-  },
-};
-
-export const depGraphMachine = Machine<
-  DepGraphContext,
-  DepGraphSchema,
-  DepGraphUIEvents
->(
-  {
-    id: 'DepGraph',
-    initial: 'idle',
-    context: initialContext,
-    states: {
-      idle: {},
-      unselected: unselectedStateConfig,
-      customSelected: customSelectedStateConfig,
-      focused: focusedStateConfig,
-      textFiltered: textFilteredStateConfig,
-      tracing: tracingStateConfig,
-    },
-    on: {
-      initGraph: {
-        target: 'unselected',
-        actions: [
-          'setGraph',
-          send(
-            (ctx, event) => ({
-              type: 'notifyGraphInitGraph',
-              projects: ctx.projects,
-              dependencies: ctx.dependencies,
-              affectedProjects: ctx.affectedProjects,
-              workspaceLayout: ctx.workspaceLayout,
-              groupByFolder: ctx.groupByFolder,
-              collapseEdges: ctx.collapseEdges,
-            }),
-            {
-              to: (context) => context.graphActor,
-            }
-          ),
-        ],
-      },
-      setSelectedProjectsFromGraph: {
-        actions: [
-          assign((ctx, event) => {
-            ctx.selectedProjects = event.selectedProjectNames;
-            ctx.lastPerfReport = event.perfReport;
-          }),
-        ],
-      },
-      selectProject: {
-        target: 'customSelected',
-        actions: ['notifyGraphShowProject'],
-      },
-      selectAll: {
-        target: 'customSelected',
-        actions: ['notifyGraphShowAllProjects', 'notifyRouteSelectAll'],
-      },
-      selectAffected: {
-        target: 'customSelected',
-        actions: [
-          'notifyGraphShowAffectedProjects',
-          'notifyRouteSelectAffected',
-        ],
-      },
-      deselectProject: [
-        {
-          target: 'unselected',
-          cond: 'deselectLastProject',
-        },
-        {
-          target: 'customSelected',
-          actions: ['notifyGraphHideProject'],
-        },
-      ],
-      deselectAll: {
-        target: 'unselected',
-      },
-      focusProject: {
-        target: 'focused',
-      },
-      setTracingStart: {
-        target: 'tracing',
-      },
-      setTracingEnd: {
-        target: 'tracing',
-      },
-      setCollapseEdges: {
-        actions: [
-          'setCollapseEdges',
-          send(
-            (ctx, event) => ({
-              type: 'notifyGraphUpdateGraph',
-              projects: ctx.projects,
-              dependencies: ctx.dependencies,
-              affectedProjects: ctx.affectedProjects,
-              workspaceLayout: ctx.workspaceLayout,
-              groupByFolder: ctx.groupByFolder,
-              collapseEdges: ctx.collapseEdges,
-              selectedProjects: ctx.selectedProjects,
-            }),
-            {
-              to: (context) => context.graphActor,
-            }
-          ),
-          send(
-            (ctx, event) => {
-              if (event.type !== 'setCollapseEdges') return;
-
-              return {
-                type: 'notifyRouteCollapseEdges',
-                collapseEdges: event.collapseEdges,
-              };
-            },
-            {
-              to: (context) => context.routeSetterActor,
-            }
-          ),
-        ],
-      },
-      setGroupByFolder: {
-        actions: [
-          'setGroupByFolder',
-          send(
-            (ctx, event) => ({
-              type: 'notifyGraphUpdateGraph',
-              projects: ctx.projects,
-              dependencies: ctx.dependencies,
-              affectedProjects: ctx.affectedProjects,
-              workspaceLayout: ctx.workspaceLayout,
-              groupByFolder: ctx.groupByFolder,
-              collapseEdges: ctx.collapseEdges,
-              selectedProjects: ctx.selectedProjects,
-            }),
-            {
-              to: (context) => context.graphActor,
-            }
-          ),
-          send(
-            (ctx, event) => {
-              if (event.type !== 'setGroupByFolder') return;
-
-              return {
-                type: 'notifyRouteGroupByFolder',
-                groupByFolder: event.groupByFolder,
-              };
-            },
-            {
-              to: (context) => context.routeSetterActor,
-            }
-          ),
-        ],
-      },
-      setIncludeProjectsByPath: {
-        actions: [
-          assign((ctx, event) => {
-            ctx.includePath = event.includeProjectsByPath;
-          }),
-        ],
-      },
-      incrementSearchDepth: {
-        actions: ['incrementSearchDepth', 'notifyRouteSearchDepth'],
-      },
-      decrementSearchDepth: {
-        actions: ['decrementSearchDepth', 'notifyRouteSearchDepth'],
-      },
-      setSearchDepthEnabled: {
-        actions: ['setSearchDepthEnabled', 'notifyRouteSearchDepth'],
-      },
-      setSearchDepth: {
-        actions: ['setSearchDepth', 'notifyRouteSearchDepth'],
-      },
-      setTracingAlgorithm: {
-        actions: [
-          assign((ctx, event) => {
-            ctx.tracing.algorithm = event.algorithm;
-          }),
-          'notifyRouteTracing',
-          'notifyGraphTracing',
-        ],
-      },
-      filterByText: {
-        target: 'textFiltered',
-      },
-    },
-  },
-  {
-    guards: {
-      deselectLastProject: (ctx) => {
-        return ctx.selectedProjects.length <= 1;
-      },
-      selectActionCannotBePersistedToRoute: (ctx, event) => {
-        return event.type !== 'selectAffected' && event.type !== 'selectAll';
-      },
-    },
-    actions: {
-      setGroupByFolder: assign((ctx, event) => {
-        if (event.type !== 'setGroupByFolder') return;
-
-        ctx.groupByFolder = event.groupByFolder;
-      }),
-      setCollapseEdges: assign((ctx, event) => {
-        if (event.type !== 'setCollapseEdges') return;
-
-        ctx.collapseEdges = event.collapseEdges;
-      }),
-      incrementSearchDepth: assign((ctx) => {
-        ctx.searchDepthEnabled = true;
-        ctx.searchDepth = ctx.searchDepth + 1;
-      }),
-      decrementSearchDepth: assign((ctx) => {
-        ctx.searchDepthEnabled = true;
-        ctx.searchDepth = ctx.searchDepth > 1 ? ctx.searchDepth - 1 : 1;
-      }),
-      setSearchDepth: assign((ctx, event) => {
-        if (event.type !== 'setSearchDepth') return;
-        ctx.searchDepthEnabled = true;
-        ctx.searchDepth = event.searchDepth > 1 ? event.searchDepth : 1;
-      }),
-      setSearchDepthEnabled: assign((ctx, event) => {
-        if (event.type !== 'setSearchDepthEnabled') return;
-
-        ctx.searchDepthEnabled = event.searchDepthEnabled;
-      }),
-      setIncludeProjectsByPath: assign((ctx, event) => {
-        if (event.type !== 'setIncludeProjectsByPath') return;
-
-        ctx.includePath = event.includeProjectsByPath;
-      }),
-      setGraph: assign((ctx, event) => {
-        if (event.type !== 'initGraph' && event.type !== 'updateGraph') return;
-
-        ctx.projects = event.projects;
-        ctx.dependencies = event.dependencies;
-        ctx.graphActor = spawn(graphActor, 'graphActor');
-        ctx.routeSetterActor = spawn(createRouteMachine(), {
-          name: 'route',
-        });
-
-        if (event.type === 'initGraph') {
-          ctx.workspaceLayout = event.workspaceLayout;
-          ctx.affectedProjects = event.affectedProjects;
-        }
-      }),
-      notifyGraphTracing: send(
-        (ctx, event) => {
-          return {
-            type: 'notifyGraphTracing',
-            start: ctx.tracing.start,
-            end: ctx.tracing.end,
-            algorithm: ctx.tracing.algorithm,
-          };
-        },
-        {
-          to: (context) => context.graphActor,
-        }
-      ),
-
-      notifyGraphShowProject: send(
-        (context, event) => {
-          if (event.type !== 'selectProject') return;
-
-          return {
-            type: 'notifyGraphShowProject',
-            projectName: event.projectName,
-          };
-        },
-        {
-          to: (context) => context.graphActor,
-        }
-      ),
-      notifyGraphHideProject: send(
-        (context, event) => {
-          if (event.type !== 'deselectProject') return;
-
-          return {
-            type: 'notifyGraphHideProject',
-            projectName: event.projectName,
-          };
-        },
-        {
-          to: (context) => context.graphActor,
-        }
-      ),
-      notifyGraphShowAllProjects: send(
-        (context, event) => ({
-          type: 'notifyGraphShowAllProjects',
-        }),
-        {
-          to: (context) => context.graphActor,
-        }
-      ),
-      notifyGraphHideAllProjects: send(
-        (context, event) => ({
-          type: 'notifyGraphHideAllProjects',
-        }),
-        {
-          to: (context) => context.graphActor,
-        }
-      ),
-      notifyGraphShowAffectedProjects: send(
-        {
-          type: 'notifyGraphShowAffectedProjects',
-        },
-        {
-          to: (ctx) => ctx.graphActor,
-        }
-      ),
-      notifyGraphFocusProject: send(
-        (context, event) => ({
-          type: 'notifyGraphFocusProject',
-          projectName: context.focusedProject,
-          searchDepth: context.searchDepthEnabled ? context.searchDepth : -1,
-        }),
-        {
-          to: (context) => context.graphActor,
-        }
-      ),
-      notifyRouteUnfocusProject: send(
-        () => ({
-          type: 'notifyRouteUnfocusProject',
-        }),
-        {
-          to: (ctx) => ctx.routeSetterActor,
-        }
-      ),
-      notifyRouteSelectAll: send(
-        () => ({
-          type: 'notifyRouteSelectAll',
-        }),
-        {
-          to: (ctx) => ctx.routeSetterActor,
-        }
-      ),
-      notifyRouteSelectAffected: send(
-        () => ({
-          type: 'notifyRouteSelectAffected',
-        }),
-        {
-          to: (ctx) => ctx.routeSetterActor,
-        }
-      ),
-      notifyRouteClearSelect: send(
-        () => ({
-          type: 'notifyRouteClearSelect',
-        }),
-        {
-          to: (ctx) => ctx.routeSetterActor,
-        }
-      ),
-      notifyRouteTracing: send(
-        (ctx) => {
-          return {
-            type: 'notifyRouteTracing',
-            start: ctx.tracing.start,
-            end: ctx.tracing.end,
-            algorithm: ctx.tracing.algorithm,
-          };
-        },
-        {
-          to: (ctx) => ctx.routeSetterActor,
-        }
-      ),
-      notifyRouteSearchDepth: send(
-        (ctx, event) => ({
-          type: 'notifyRouteSearchDepth',
-          searchDepth: ctx.searchDepth,
-          searchDepthEnabled: ctx.searchDepthEnabled,
-        }),
-
-        {
-          to: (ctx) => ctx.routeSetterActor,
-        }
-      ),
-      notifyGraphFilterProjectsByText: send(
-        (context, event) => ({
-          type: 'notifyGraphFilterProjectsByText',
-          search: context.textFilter,
-          includeProjectsByPath: context.includePath,
-          searchDepth: context.searchDepthEnabled ? context.searchDepth : -1,
-        }),
-        {
-          to: (context) => context.graphActor,
-        }
-      ),
-    },
-  }
-);

dep-graph/client/src/app/machines/dep-graph.service.ts

@@ -1,25 +0,0 @@
-import { interpret, Interpreter, Typestate } from 'xstate';
-import { depGraphMachine } from './dep-graph.machine';
-import {
-  DepGraphContext,
-  DepGraphSchema,
-  DepGraphUIEvents,
-} from './interfaces';
-
-let depGraphService: Interpreter<
-  DepGraphContext,
-  DepGraphSchema,
-  DepGraphUIEvents,
-  Typestate<DepGraphContext>
->;
-
-export function getDepGraphService() {
-  if (!depGraphService) {
-    depGraphService = interpret(depGraphMachine, {
-      devTools: !!window.useXstateInspect,
-    });
-    depGraphService.start();
-  }
-
-  return depGraphService;
-}

dep-graph/client/src/app/machines/dep-graph.spec.ts

@@ -1,401 +0,0 @@
-// nx-ignore-next-line
-import type { ProjectGraphDependency, ProjectGraphNode } from '@nrwl/devkit';
-import { interpret } from 'xstate';
-import { depGraphMachine } from './dep-graph.machine';
-
-export const mockProjects: ProjectGraphNode[] = [
-  {
-    name: 'app1',
-    type: 'app',
-    data: {
-      root: 'apps/app1',
-    },
-  },
-  {
-    name: 'app2',
-    type: 'app',
-    data: {
-      root: 'apps/app2',
-    },
-  },
-  {
-    name: 'ui-lib',
-    type: 'lib',
-    data: {
-      root: 'libs/ui-lib',
-    },
-  },
-  {
-    name: 'feature-lib1',
-    type: 'lib',
-    data: {
-      root: 'libs/feature/lib1',
-    },
-  },
-  {
-    name: 'feature-lib2',
-    type: 'lib',
-    data: {
-      root: 'libs/feature/lib2',
-    },
-  },
-  {
-    name: 'auth-lib',
-    type: 'lib',
-    data: {
-      root: 'libs/auth-lib',
-    },
-  },
-];
-
-export const mockDependencies: Record<string, ProjectGraphDependency[]> = {
-  app1: [
-    {
-      type: 'static',
-      source: 'app1',
-      target: 'auth-lib',
-    },
-    {
-      type: 'static',
-      source: 'app1',
-      target: 'feature-lib1',
-    },
-  ],
-  app2: [
-    {
-      type: 'static',
-      source: 'app2',
-      target: 'auth-lib',
-    },
-    {
-      type: 'static',
-      source: 'app2',
-      target: 'feature-lib2',
-    },
-  ],
-  'feature-lib1': [
-    {
-      type: 'static',
-      source: 'feature-lib1',
-      target: 'ui-lib',
-    },
-  ],
-  'feature-lib2': [
-    {
-      type: 'static',
-      source: 'feature-lib2',
-      target: 'ui-lib',
-    },
-  ],
-  'ui-lib': [],
-  'auth-lib': [],
-};
-
-describe('dep-graph machine', () => {
-  describe('initGraph', () => {
-    it('should set projects, dependencies, and workspaceLayout', () => {
-      const result = depGraphMachine.transition(depGraphMachine.initialState, {
-        type: 'initGraph',
-        projects: mockProjects,
-        dependencies: mockDependencies,
-        affectedProjects: [],
-        workspaceLayout: { appsDir: 'apps', libsDir: 'libs' },
-      });
-      expect(result.context.projects).toEqual(mockProjects);
-      expect(result.context.dependencies).toEqual(mockDependencies);
-      expect(result.context.workspaceLayout).toEqual({
-        appsDir: 'apps',
-        libsDir: 'libs',
-      });
-    });
-
-    it('should start with no projects selected', () => {
-      const result = depGraphMachine.transition(depGraphMachine.initialState, {
-        type: 'initGraph',
-        projects: mockProjects,
-        dependencies: mockDependencies,
-        affectedProjects: [],
-        workspaceLayout: { appsDir: 'apps', libsDir: 'libs' },
-      });
-
-      expect(result.value).toEqual('unselected');
-      expect(result.context.selectedProjects).toEqual([]);
-    });
-  });
-
-  describe('selecting projects', () => {
-    it('should select projects', (done) => {
-      let service = interpret(depGraphMachine).onTransition((state) => {
-        if (
-          state.matches('customSelected') &&
-          state.context.selectedProjects.includes('app1') &&
-          state.context.selectedProjects.includes('app2')
-        ) {
-          done();
-        }
-      });
-
-      service.start();
-
-      service.send({
-        type: 'initGraph',
-        projects: mockProjects,
-        dependencies: mockDependencies,
-        affectedProjects: [],
-        workspaceLayout: { appsDir: 'apps', libsDir: 'libs' },
-      });
-
-      service.send({
-        type: 'selectProject',
-        projectName: 'app1',
-      });
-
-      service.send({
-        type: 'selectProject',
-        projectName: 'app2',
-      });
-    });
-  });
-
-  describe('deselecting projects', () => {
-    it('should deselect projects', (done) => {
-      let service = interpret(depGraphMachine).onTransition((state) => {
-        if (
-          state.matches('customSelected') &&
-          !state.context.selectedProjects.includes('app1') &&
-          state.context.selectedProjects.includes('app2')
-        ) {
-          done();
-        }
-      });
-
-      service.start();
-
-      service.send({
-        type: 'initGraph',
-        projects: mockProjects,
-        dependencies: mockDependencies,
-        affectedProjects: [],
-        workspaceLayout: { appsDir: 'apps', libsDir: 'libs' },
-      });
-
-      service.send({
-        type: 'selectProject',
-        projectName: 'app1',
-      });
-
-      service.send({
-        type: 'selectProject',
-        projectName: 'app2',
-      });
-
-      service.send({
-        type: 'deselectProject',
-        projectName: 'app1',
-      });
-    });
-
-    it('should go to unselected when last project is deselected', () => {
-      let result = depGraphMachine.transition(depGraphMachine.initialState, {
-        type: 'initGraph',
-        projects: mockProjects,
-        dependencies: mockDependencies,
-        affectedProjects: [],
-        workspaceLayout: { appsDir: 'apps', libsDir: 'libs' },
-      });
-
-      result = depGraphMachine.transition(result, {
-        type: 'selectProject',
-        projectName: 'app1',
-      });
-
-      result = depGraphMachine.transition(result, {
-        type: 'selectProject',
-        projectName: 'app2',
-      });
-
-      result = depGraphMachine.transition(result, {
-        type: 'deselectProject',
-        projectName: 'app1',
-      });
-
-      result = depGraphMachine.transition(result, {
-        type: 'deselectProject',
-        projectName: 'app2',
-      });
-
-      expect(result.value).toEqual('unselected');
-      expect(result.context.selectedProjects).toEqual([]);
-    });
-  });
-
-  describe('focusing projects', () => {
-    it('should set the focused project', () => {
-      let result = depGraphMachine.transition(depGraphMachine.initialState, {
-        type: 'initGraph',
-        projects: mockProjects,
-        dependencies: mockDependencies,
-        affectedProjects: [],
-        workspaceLayout: { appsDir: 'apps', libsDir: 'libs' },
-      });
-
-      result = depGraphMachine.transition(result, {
-        type: 'focusProject',
-        projectName: 'app1',
-      });
-
-      expect(result.value).toEqual('focused');
-      expect(result.context.focusedProject).toEqual('app1');
-    });
-
-    it('should select the projects by the focused project', (done) => {
-      let service = interpret(depGraphMachine).onTransition((state) => {
-        if (
-          state.matches('focused') &&
-          state.context.selectedProjects.includes('app1') &&
-          state.context.selectedProjects.includes('ui-lib') &&
-          state.context.selectedProjects.includes('feature-lib1') &&
-          state.context.selectedProjects.includes('auth-lib')
-        ) {
-          done();
-        }
-      });
-
-      service.start();
-
-      service.send({
-        type: 'initGraph',
-        projects: mockProjects,
-        dependencies: mockDependencies,
-        affectedProjects: [],
-        workspaceLayout: { appsDir: 'apps', libsDir: 'libs' },
-      });
-      service.send({
-        type: 'setSearchDepthEnabled',
-        searchDepthEnabled: false,
-      });
-      service.send({ type: 'focusProject', projectName: 'app1' });
-    });
-
-    it('should select no projects on unfocus', () => {
-      let result = depGraphMachine.transition(depGraphMachine.initialState, {
-        type: 'initGraph',
-        projects: mockProjects,
-        dependencies: mockDependencies,
-        affectedProjects: [],
-        workspaceLayout: { appsDir: 'apps', libsDir: 'libs' },
-      });
-
-      result = depGraphMachine.transition(result, {
-        type: 'focusProject',
-        projectName: 'app1',
-      });
-
-      result = depGraphMachine.transition(result, {
-        type: 'unfocusProject',
-      });
-
-      expect(result.value).toEqual('unselected');
-      expect(result.context.selectedProjects).toEqual([]);
-    });
-  });
-
-  describe('search depth', () => {
-    it('should not decrement search depth below 1', () => {
-      let result = depGraphMachine.transition(depGraphMachine.initialState, {
-        type: 'initGraph',
-        projects: mockProjects,
-        dependencies: mockDependencies,
-        affectedProjects: [],
-        workspaceLayout: { appsDir: 'apps', libsDir: 'libs' },
-      });
-
-      result = depGraphMachine.transition(result, {
-        type: 'filterByText',
-        search: 'app1',
-      });
-
-      expect(result.context.searchDepth).toEqual(1);
-
-      result = depGraphMachine.transition(result, {
-        type: 'incrementSearchDepth',
-      });
-
-      expect(result.context.searchDepth).toEqual(2);
-
-      result = depGraphMachine.transition(result, {
-        type: 'incrementSearchDepth',
-      });
-
-      result = depGraphMachine.transition(result, {
-        type: 'incrementSearchDepth',
-      });
-
-      expect(result.context.searchDepth).toEqual(4);
-
-      result = depGraphMachine.transition(result, {
-        type: 'decrementSearchDepth',
-      });
-
-      result = depGraphMachine.transition(result, {
-        type: 'decrementSearchDepth',
-      });
-
-      expect(result.context.searchDepth).toEqual(2);
-
-      result = depGraphMachine.transition(result, {
-        type: 'decrementSearchDepth',
-      });
-
-      expect(result.context.searchDepth).toEqual(1);
-
-      result = depGraphMachine.transition(result, {
-        type: 'decrementSearchDepth',
-      });
-
-      expect(result.context.searchDepth).toEqual(1);
-
-      result = depGraphMachine.transition(result, {
-        type: 'decrementSearchDepth',
-      });
-
-      expect(result.context.searchDepth).toEqual(1);
-    });
-
-    it('should activate search depth if incremented or decremented', () => {
-      let result = depGraphMachine.transition(depGraphMachine.initialState, {
-        type: 'initGraph',
-        projects: mockProjects,
-        dependencies: mockDependencies,
-        affectedProjects: [],
-        workspaceLayout: { appsDir: 'apps', libsDir: 'libs' },
-      });
-
-      result = depGraphMachine.transition(result, {
-        type: 'setSearchDepthEnabled',
-        searchDepthEnabled: false,
-      });
-
-      expect(result.context.searchDepthEnabled).toBe(false);
-
-      result = depGraphMachine.transition(result, {
-        type: 'incrementSearchDepth',
-      });
-
-      expect(result.context.searchDepthEnabled).toBe(true);
-
-      result = depGraphMachine.transition(result, {
-        type: 'setSearchDepthEnabled',
-        searchDepthEnabled: false,
-      });
-
-      expect(result.context.searchDepthEnabled).toBe(false);
-
-      result = depGraphMachine.transition(result, {
-        type: 'decrementSearchDepth',
-      });
-
-      expect(result.context.searchDepthEnabled).toBe(true);
-    });
-  });
-});

dep-graph/client/src/app/machines/focused.state.ts

@@ -1,87 +0,0 @@
-import { assign } from '@xstate/immer';
-import { send } from 'xstate';
-import { DepGraphStateNodeConfig } from './interfaces';
-
-export const focusedStateConfig: DepGraphStateNodeConfig = {
-  entry: [
-    assign((ctx, event) => {
-      if (event.type !== 'focusProject') return;
-
-      ctx.focusedProject = event.projectName;
-    }),
-    send(
-      (ctx, event) => {
-        if (event.type !== 'focusProject') return;
-
-        return {
-          type: 'notifyRouteFocusProject',
-          focusedProject: event.projectName,
-        };
-      },
-      {
-        to: (context) => context.routeSetterActor,
-      }
-    ),
-    'notifyGraphFocusProject',
-  ],
-  exit: [
-    assign((ctx) => {
-      ctx.focusedProject = null;
-    }),
-    'notifyRouteUnfocusProject',
-  ],
-  on: {
-    incrementSearchDepth: {
-      actions: [
-        'incrementSearchDepth',
-        'notifyGraphFocusProject',
-        'notifyRouteSearchDepth',
-      ],
-    },
-    decrementSearchDepth: {
-      actions: [
-        'decrementSearchDepth',
-        'notifyGraphFocusProject',
-        'notifyRouteSearchDepth',
-      ],
-    },
-    setSearchDepthEnabled: {
-      actions: [
-        'setSearchDepthEnabled',
-        'notifyGraphFocusProject',
-        'notifyRouteSearchDepth',
-      ],
-    },
-    setSearchDepth: {
-      actions: [
-        'setSearchDepth',
-        'notifyGraphFocusProject',
-        'notifyRouteSearchDepth',
-      ],
-    },
-    unfocusProject: {
-      target: 'unselected',
-      actions: ['notifyRouteUnfocusProject'],
-    },
-    updateGraph: {
-      actions: [
-        'setGraph',
-        send(
-          (ctx, event) => ({
-            type: 'notifyGraphUpdateGraph',
-            projects: ctx.projects,
-            dependencies: ctx.dependencies,
-            affectedProjects: ctx.affectedProjects,
-            workspaceLayout: ctx.workspaceLayout,
-            groupByFolder: ctx.groupByFolder,
-            selectedProjects: ctx.selectedProjects,
-          }),
-          {
-            to: (context) => context.graphActor,
-          }
-        ),
-        'notifyGraphFocusProject',
-      ],
-    },
-  },
-};

dep-graph/client/src/app/machines/graph.actor.ts

@@ -1,14 +0,0 @@
-import { getGraphService } from './graph.service';
-
-export const graphActor = (callback, receive) => {
-  const graphService = getGraphService();
-
-  receive((e) => {
-    const { selectedProjectNames, perfReport } = graphService.handleEvent(e);
-    callback({
-      type: 'setSelectedProjectsFromGraph',
-      selectedProjectNames,
-      perfReport,
-    });
-  });
-};

dep-graph/client/src/app/machines/graph.service.ts

@@ -1,12 +0,0 @@
-import { getTooltipService } from '../tooltip-service';
-import { GraphService } from './graph';
-
-let graphService: GraphService;
-
-export function getGraphService(): GraphService {
-  if (!graphService) {
-    graphService = new GraphService(getTooltipService(), 'cytoscape-graph');
-  }
-
-  return graphService;
-}

dep-graph/client/src/app/machines/graph.ts

@@ -1,667 +0,0 @@
-// nx-ignore-next-line
-import type {
-  ProjectGraphDependency,
-  ProjectGraphProjectNode,
-} from '@nrwl/devkit';
-import type { VirtualElement } from '@popperjs/core';
-import cy from 'cytoscape';
-import cytoscapeDagre from 'cytoscape-dagre';
-import popper from 'cytoscape-popper';
-import { edgeStyles, nodeStyles } from '../styles-graph';
-import { selectValueByThemeStatic } from '../theme-resolver';
-import { GraphTooltipService } from '../tooltip-service';
-import {
-  CytoscapeDagreConfig,
-  ParentNode,
-  ProjectEdge,
-  ProjectNode,
-} from '../util-cytoscape';
-import { GraphPerfReport, GraphRenderEvents } from './interfaces';
-
-export class GraphService {
-  private traversalGraph: cy.Core;
-  private renderGraph: cy.Core;
-
-  private collapseEdges = false;
-
-  constructor(
-    private tooltipService: GraphTooltipService,
-    private containerId: string
-  ) {
-    cy.use(cytoscapeDagre);
-    cy.use(popper);
-  }
-
-  handleEvent(event: GraphRenderEvents): {
-    selectedProjectNames: string[];
-    perfReport: GraphPerfReport;
-  } {
-    const time = Date.now();
-
-    if (this.renderGraph && event.type !== 'notifyGraphUpdateGraph') {
-      this.renderGraph.nodes('.focused').removeClass('focused');
-    }
-
-    this.tooltipService.hideAll();
-
-    switch (event.type) {
-      case 'notifyGraphInitGraph':
-        this.initGraph(
-          event.projects,
-          event.groupByFolder,
-          event.workspaceLayout,
-          event.dependencies,
-          event.affectedProjects,
-          event.collapseEdges
-        );
-        break;
-
-      case 'notifyGraphUpdateGraph':
-        this.initGraph(
-          event.projects,
-          event.groupByFolder,
-          event.workspaceLayout,
-          event.dependencies,
-          event.affectedProjects,
-          event.collapseEdges
-        );
-        this.setShownProjects(
-          event.selectedProjects.length > 0
-            ? event.selectedProjects
-            : this.renderGraph.nodes(':childless').map((node) => node.id())
-        );
-        break;
-
-      case 'notifyGraphFocusProject':
-        this.focusProject(event.projectName, event.searchDepth);
-        break;
-
-      case 'notifyGraphFilterProjectsByText':
-        this.filterProjectsByText(
-          event.search,
-          event.includeProjectsByPath,
-          event.searchDepth
-        );
-        break;
-
-      case 'notifyGraphShowProject':
-        this.showProjects([event.projectName]);
-        break;
-
-      case 'notifyGraphHideProject':
-        this.hideProject(event.projectName);
-        break;
-
-      case 'notifyGraphShowAllProjects':
-        this.showAllProjects();
-        break;
-
-      case 'notifyGraphHideAllProjects':
-        this.hideAllProjects();
-        break;
-
-      case 'notifyGraphShowAffectedProjects':
-        this.showAffectedProjects();
-        break;
-
-      case 'notifyGraphTracing':
-        if (event.start && event.end) {
-          if (event.algorithm === 'shortest') {
-            this.traceProjects(event.start, event.end);
-          } else {
-            this.traceAllProjects(event.start, event.end);
-          }
-        }
-        break;
-    }
-
-    let selectedProjectNames: string[] = [];
-    let perfReport: GraphPerfReport = {
-      numEdges: 0,
-      numNodes: 0,
-      renderTime: 0,
-    };
-
-    if (this.renderGraph) {
-      const elements = this.renderGraph.elements().sort((a, b) => {
-        return a.id().localeCompare(b.id());
-      });
-
-      elements
-        .layout({
-          name: 'dagre',
-          nodeDimensionsIncludeLabels: true,
-          rankSep: 75,
-          rankDir: 'TB',
-          edgeSep: 50,
-          ranker: 'network-simplex',
-        } as CytoscapeDagreConfig)
-        .run();
-
-      if (this.collapseEdges) {
-        this.renderGraph.remove(this.renderGraph.edges());
-
-        elements.edges().forEach((edge) => {
-          const sourceNode = edge.source();
-          const targetNode = edge.target();
-
-          if (
-            sourceNode.parent().first().id() ===
-            targetNode.parent().first().id()
-          ) {
-            this.renderGraph.add(edge);
-          } else {
-            let sourceAncestors, targetAncestors;
-            const commonAncestors = edge.connectedNodes().commonAncestors();
-
-            if (commonAncestors.length > 0) {
-              sourceAncestors = sourceNode
-                .ancestors()
-                .filter((anc) => !commonAncestors.contains(anc));
-              targetAncestors = targetNode
-                .ancestors()
-                .filter((anc) => !commonAncestors.contains(anc));
-            } else {
-              sourceAncestors = sourceNode.ancestors();
-              targetAncestors = targetNode.ancestors();
-            }
-
-            let sourceId, targetId;
-
-            if (sourceAncestors.length > 0 && targetAncestors.length === 0) {
-              sourceId = sourceAncestors.last().id();
-              targetId = targetNode.id();
-            } else if (
-              targetAncestors.length > 0 &&
-              sourceAncestors.length === 0
-            ) {
-              sourceId = sourceNode.id();
-              targetId = targetAncestors.last().id();
-            } else {
-              sourceId = sourceAncestors.last().id();
-              targetId = targetAncestors.last().id();
-            }
-
-            if (sourceId !== undefined && targetId !== undefined) {
-              const edgeId = `${sourceId}|${targetId}`;
-
-              if (this.renderGraph.$id(edgeId).length === 0) {
-                const ancestorEdge: cy.EdgeDefinition = {
-                  group: 'edges',
-                  data: {
-                    id: edgeId,
-                    source: sourceId,
-                    target: targetId,
-                  },
-                };
-
-                this.renderGraph.add(ancestorEdge);
-              }
-            } else {
-              console.log(`Couldn't figure out how to draw edge ${edge.id()}`);
-              console.log(
-                'source ancestors',
-                sourceAncestors.map((anc) => anc.id())
-              );
-              console.log(
-                'target ancestors',
-                targetAncestors.map((anc) => anc.id())
-              );
-            }
-          }
-        });
-      }
-
-      this.renderGraph.fit().center().resize();
-
-      selectedProjectNames = this.renderGraph
-        .nodes('[type!="dir"]')
-        .map((node) => node.id());
-
-      const renderTime = Date.now() - time;
-
-      perfReport = {
-        renderTime,
-        numNodes: this.renderGraph.nodes().length,
-        numEdges: this.renderGraph.edges().length,
-      };
-    }
-
-    return { selectedProjectNames, perfReport };
-  }
-
-  setShownProjects(selectedProjectNames: string[]) {
-    let nodesToAdd = this.traversalGraph.collection();
-
-    selectedProjectNames.forEach((name) => {
-      nodesToAdd = nodesToAdd.union(this.traversalGraph.$id(name));
-    });
-
-    const ancestorsToAdd = nodesToAdd.ancestors();
-
-    const nodesToRender = nodesToAdd.union(ancestorsToAdd);
-    const edgesToRender = nodesToRender.edgesTo(nodesToRender);
-
-    this.transferToRenderGraph(nodesToRender.union(edgesToRender));
-  }
-
-  showProjects(selectedProjectNames: string[]) {
-    const currentNodes =
-      this.renderGraph?.nodes() ?? this.traversalGraph.collection();
-
-    let nodesToAdd = this.traversalGraph.collection();
-
-    selectedProjectNames.forEach((name) => {
-      nodesToAdd = nodesToAdd.union(this.traversalGraph.$id(name));
-    });
-
-    const ancestorsToAdd = nodesToAdd.ancestors();
-
-    const nodesToRender = currentNodes.union(nodesToAdd).union(ancestorsToAdd);
-    const edgesToRender = nodesToRender.edgesTo(nodesToRender);
-
-    this.transferToRenderGraph(nodesToRender.union(edgesToRender));
-  }
-
-  hideProject(projectName: string) {
-    const currentNodes =
-      this.renderGraph?.nodes() ?? this.traversalGraph.collection();
-    const nodeToHide = this.renderGraph.$id(projectName);
-
-    const nodesToAdd = currentNodes
-      .difference(nodeToHide)
-      .difference(nodeToHide.ancestors());
-    const ancestorsToAdd = nodesToAdd.ancestors();
-
-    let nodesToRender = nodesToAdd.union(ancestorsToAdd);
-
-    const edgesToRender = nodesToRender.edgesTo(nodesToRender);
-
-    this.transferToRenderGraph(nodesToRender.union(edgesToRender));
-  }
-
-  showAffectedProjects() {
-    const affectedProjects = this.traversalGraph.nodes('.affected');
-    const affectedAncestors = affectedProjects.ancestors();
-
-    const affectedNodes = affectedProjects.union(affectedAncestors);
-    const affectedEdges = affectedNodes.edgesTo(affectedNodes);
-
-    this.transferToRenderGraph(affectedNodes.union(affectedEdges));
-  }
-
-  focusProject(focusedProjectName: string, searchDepth: number = 1) {
-    const focusedProject = this.traversalGraph.$id(focusedProjectName);
-
-    const includedProjects = this.includeProjectsByDepth(
-      focusedProject,
-      searchDepth
-    );
-
-    const includedNodes = focusedProject.union(includedProjects);
-
-    const includedAncestors = includedNodes.ancestors();
-
-    const nodesToRender = includedNodes.union(includedAncestors);
-    const edgesToRender = nodesToRender.edgesTo(nodesToRender);
-
-    this.transferToRenderGraph(nodesToRender.union(edgesToRender));
-
-    this.renderGraph.$id(focusedProjectName).addClass('focused');
-  }
-
-  showAllProjects() {
-    this.transferToRenderGraph(this.traversalGraph.elements());
-  }
-
-  hideAllProjects() {
-    this.transferToRenderGraph(this.traversalGraph.collection());
-  }
-
-  filterProjectsByText(
-    search: string,
-    includePath: boolean,
-    searchDepth: number = -1
-  ) {
-    if (search === '') {
-      this.transferToRenderGraph(this.traversalGraph.collection());
-    } else {
-      const split = search.split(',');
-
-      let filteredProjects = this.traversalGraph.nodes().filter((node) => {
-        return (
-          split.findIndex((splitItem) => node.id().includes(splitItem)) > -1
-        );
-      });
-
-      if (includePath) {
-        filteredProjects = filteredProjects.union(
-          this.includeProjectsByDepth(filteredProjects, searchDepth)
-        );
-      }
-
-      filteredProjects = filteredProjects.union(filteredProjects.ancestors());
-      const edgesToRender = filteredProjects.edgesTo(filteredProjects);
-
-      this.transferToRenderGraph(filteredProjects.union(edgesToRender));
-    }
-  }
-
-  traceProjects(start: string, end: string) {
-    const dijkstra = this.traversalGraph
-      .elements()
-      .dijkstra({ root: `[id = "${start}"]`, directed: true });
-
-    const path = dijkstra.pathTo(this.traversalGraph.$(`[id = "${end}"]`));
-
-    this.transferToRenderGraph(path.union(path.ancestors()));
-  }
-
-  traceAllProjects(start: string, end: string) {
-    const startNode = this.traversalGraph.$id(start).nodes().first();
-
-    const queue: cy.NodeSingular[][] = [[startNode]];
-
-    const paths: cy.NodeSingular[][] = [];
-    let iterations = 0;
-
-    while (queue.length > 0 && iterations <= 1000) {
-      const currentPath = queue.pop();
-
-      const nodeToTest = currentPath[currentPath.length - 1];
-
-      const outgoers = nodeToTest.outgoers('node');
-
-      if (outgoers.length > 0) {
-        outgoers.forEach((outgoer) => {
-          const newPath = [...currentPath, outgoer];
-          if (outgoer.id() === end) {
-            paths.push(newPath);
-          } else {
-            queue.push(newPath);
-          }
-        });
-      }
-
-      iterations++;
-    }
-
-    if (iterations >= 1000) {
-      console.log('failsafe triggered!');
-    }
-
-    let finalCollection = this.traversalGraph.collection();
-
-    paths.forEach((path) => {
-      for (let i = 0; i < path.length; i++) {
-        finalCollection = finalCollection.union(path[i]);
-
-        const nextIndex = i + 1;
-        if (nextIndex < path.length) {
-          finalCollection = finalCollection.union(
-            path[i].edgesTo(path[nextIndex])
-          );
-        }
-      }
-    });
-
-    finalCollection.union(finalCollection.ancestors());
-    this.transferToRenderGraph(
-      finalCollection.union(finalCollection.ancestors())
-    );
-  }
-
-  private transferToRenderGraph(elements: cy.Collection) {
-    let currentFocusedProjectName;
-    if (this.renderGraph) {
-      currentFocusedProjectName = this.renderGraph
-        .nodes('.focused')
-        .first()
-        .id();
-      this.renderGraph.destroy();
-      delete this.renderGraph;
-    }
-    const container = document.getElementById(this.containerId);
-
-    this.renderGraph = cy({
-      container: container,
-      headless: !container,
-      boxSelectionEnabled: false,
-      style: [...nodeStyles, ...edgeStyles],
-    });
-
-    this.renderGraph.add(elements);
-
-    if (!!currentFocusedProjectName) {
-      this.renderGraph.$id(currentFocusedProjectName).addClass('focused');
-    }
-
-    this.renderGraph.on('zoom', () => {
-      this.tooltipService.hideAll();
-    });
-
-    this.listenForProjectNodeClicks();
-    this.listenForEdgeNodeClicks();
-    this.listenForProjectNodeHovers();
-  }
-
-  private includeProjectsByDepth(
-    projects: cy.NodeCollection | cy.NodeSingular,
-    depth: number = -1
-  ) {
-    let predecessors = this.traversalGraph.collection();
-
-    if (depth === -1) {
-      predecessors = projects.predecessors();
-    } else {
-      predecessors = projects.incomers();
-
-      for (let i = 1; i < depth; i++) {
-        predecessors = predecessors.union(predecessors.incomers());
-      }
-    }
-
-    let successors = this.traversalGraph.collection();
-
-    if (depth === -1) {
-      successors = projects.successors();
-    } else {
-      successors = projects.outgoers();
-
-      for (let i = 1; i < depth; i++) {
-        successors = successors.union(successors.outgoers());
-      }
-    }
-
-    return projects.union(predecessors).union(successors);
-  }
-
-  initGraph(
-    allProjects: ProjectGraphProjectNode[],
-    groupByFolder: boolean,
-    workspaceLayout,
-    dependencies: Record<string, ProjectGraphDependency[]>,
-    affectedProjectIds: string[],
-    collapseEdges: boolean
-  ) {
-    this.collapseEdges = collapseEdges;
-    this.tooltipService.hideAll();
-
-    this.generateCytoscapeLayout(
-      allProjects,
-      groupByFolder,
-      workspaceLayout,
-      dependencies,
-      affectedProjectIds
-    );
-  }
-
-  private generateCytoscapeLayout(
-    allProjects: ProjectGraphProjectNode[],
-    groupByFolder: boolean,
-    workspaceLayout,
-    dependencies: Record<string, ProjectGraphDependency[]>,
-    affectedProjectIds: string[]
-  ) {
-    const elements = this.createElements(
-      allProjects,
-      groupByFolder,
-      workspaceLayout,
-      dependencies,
-      affectedProjectIds
-    );
-
-    this.traversalGraph = cy({
-      headless: true,
-      elements: [...elements],
-      boxSelectionEnabled: false,
-      style: [...nodeStyles, ...edgeStyles],
-    });
-  }
-
-  private createElements(
-    projects: ProjectGraphProjectNode[],
-    groupByFolder: boolean,
-    workspaceLayout: {
-      appsDir: string;
-      libsDir: string;
-    },
-    dependencies: Record<string, ProjectGraphDependency[]>,
-    affectedProjectIds: string[]
-  ) {
-    let elements: cy.ElementDefinition[] = [];
-    const filteredProjectNames = projects.map((project) => project.name);
-
-    const projectNodes: ProjectNode[] = [];
-    const edgeNodes: ProjectEdge[] = [];
-    const parents: Record<
-      string,
-      { id: string; parentId: string; label: string }
-    > = {};
-
-    projects.forEach((project) => {
-      const workspaceRoot =
-        project.type === 'app' || project.type === 'e2e'
-          ? workspaceLayout.appsDir
-          : workspaceLayout.libsDir;
-
-      const projectNode = new ProjectNode(project, workspaceRoot);
-
-      projectNode.affected = affectedProjectIds.includes(project.name);
-
-      projectNodes.push(projectNode);
-
-      dependencies[project.name].forEach((dep) => {
-        if (filteredProjectNames.includes(dep.target)) {
-          const edge = new ProjectEdge(dep);
-          edgeNodes.push(edge);
-        }
-      });
-
-      if (groupByFolder) {
-        const ancestors = projectNode.getAncestors();
-        ancestors.forEach((ancestor) => (parents[ancestor.id] = ancestor));
-      }
-    });
-
-    const projectElements = projectNodes.map((projectNode) =>
-      projectNode.getCytoscapeNodeDef(groupByFolder)
-    );
-
-    const edgeElements = edgeNodes.map((edgeNode) =>
-      edgeNode.getCytosacpeNodeDef()
-    );
-
-    elements = projectElements.concat(edgeElements);
-
-    if (groupByFolder) {
-      const parentElements = Object.keys(parents).map((id) =>
-        new ParentNode(parents[id]).getCytoscapeNodeDef()
-      );
-      elements = parentElements.concat(elements);
-    }
-
-    return elements;
-  }
-
-  listenForProjectNodeClicks() {
-    this.renderGraph.$('node:childless').on('click', (event) => {
-      const node = event.target;
-
-      let ref: VirtualElement = node.popperRef(); // used only for positioning
-
-      this.tooltipService.openProjectNodeToolTip(ref, {
-        id: node.id(),
-        type: node.data('type'),
-        tags: node.data('tags'),
-      });
-    });
-  }
-
-  listenForEdgeNodeClicks() {
-    this.renderGraph.$('edge').on('click', (event) => {
-      const edge: cy.EdgeSingular = event.target;
-      let ref: VirtualElement = edge.popperRef(); // used only for positioning
-
-      this.tooltipService.openEdgeToolTip(ref, {
-        type: edge.data('type'),
-        source: edge.source().id(),
-        target: edge.target().id(),
-        fileDependencies: edge
-          .source()
-          .data('files')
-          .filter((file) => file.deps && file.deps.includes(edge.target().id()))
-          .map((file) => {
-            return {
-              fileName: file.file.replace(`${edge.source().data('root')}/`, ''),
-              target: edge.target().id(),
-            };
-          }),
-      });
-    });
-  }
-
-  listenForProjectNodeHovers(): void {
-    this.renderGraph.on('mouseover', (event) => {
-      const node = event.target;
-      if (!node.isNode || !node.isNode() || node.isParent()) return;
-
-      this.renderGraph
-        .elements()
-        .difference(node.outgoers().union(node.incomers()))
-        .not(node)
-        .addClass('transparent');
-      node
-        .addClass('highlight')
-        .outgoers()
-        .union(node.incomers())
-        .addClass('highlight');
-    });
-
-    this.renderGraph.on('mouseout', (event) => {
-      const node = event.target;
-      if (!node.isNode || !node.isNode() || node.isParent()) return;
-
-      this.renderGraph.elements().removeClass('transparent');
-      node
-        .removeClass('highlight')
-        .outgoers()
-        .union(node.incomers())
-        .removeClass('highlight');
-    });
-  }
-
-  getImage() {
-    const bg = selectValueByThemeStatic('#0F172A', '#FFFFFF');
-    return this.renderGraph.png({ bg, full: true });
-  }
-
-  evaluateStyles() {
-    if (this.renderGraph) {
-      const container = this.renderGraph.container();
-      this.renderGraph.unmount();
-
-      this.renderGraph.mount(container);
-    }
-  }
-}

dep-graph/client/src/app/machines/interfaces.ts

@@ -1,219 +0,0 @@
-// nx-ignore-next-line
-import type {
-  ProjectGraphDependency,
-  ProjectGraphProjectNode,
-} from '@nrwl/devkit';
-import { ActionObject, ActorRef, State, StateNodeConfig } from 'xstate';
-
-// The hierarchical (recursive) schema for the states
-export interface DepGraphSchema {
-  states: {
-    idle: {};
-    unselected: {};
-    focused: {};
-    textFiltered: {};
-    customSelected: {};
-    tracing: {};
-  };
-}
-
-export interface GraphPerfReport {
-  renderTime: number;
-  numNodes: number;
-  numEdges: number;
-}
-
-export type TracingAlgorithmType = 'shortest' | 'all';
-// The events that the machine handles
-
-export type DepGraphUIEvents =
-  | {
-      type: 'setSelectedProjectsFromGraph';
-      selectedProjectNames: string[];
-      perfReport: GraphPerfReport;
-    }
-  | { type: 'selectProject'; projectName: string }
-  | { type: 'deselectProject'; projectName: string }
-  | { type: 'selectAll' }
-  | { type: 'deselectAll' }
-  | { type: 'selectAffected' }
-  | { type: 'setGroupByFolder'; groupByFolder: boolean }
-  | { type: 'setTracingStart'; projectName: string }
-  | { type: 'setTracingEnd'; projectName: string }
-  | { type: 'clearTraceStart' }
-  | { type: 'clearTraceEnd' }
-  | { type: 'setTracingAlgorithm'; algorithm: TracingAlgorithmType }
-  | { type: 'setCollapseEdges'; collapseEdges: boolean }
-  | { type: 'setIncludeProjectsByPath'; includeProjectsByPath: boolean }
-  | { type: 'incrementSearchDepth' }
-  | { type: 'decrementSearchDepth' }
-  | { type: 'setSearchDepthEnabled'; searchDepthEnabled: boolean }
-  | { type: 'setSearchDepth'; searchDepth: number }
-  | { type: 'focusProject'; projectName: string }
-  | { type: 'unfocusProject' }
-  | { type: 'filterByText'; search: string }
-  | { type: 'clearTextFilter' }
-  | {
-      type: 'initGraph';
-      projects: ProjectGraphProjectNode[];
-      dependencies: Record<string, ProjectGraphDependency[]>;
-      affectedProjects: string[];
-      workspaceLayout: {
-        libsDir: string;
-        appsDir: string;
-      };
-    }
-  | {
-      type: 'updateGraph';
-      projects: ProjectGraphProjectNode[];
-      dependencies: Record<string, ProjectGraphDependency[]>;
-    };
-
-// The events that the graph actor handles
-
-export type GraphRenderEvents =
-  | {
-      type: 'notifyGraphInitGraph';
-      projects: ProjectGraphProjectNode[];
-      dependencies: Record<string, ProjectGraphDependency[]>;
-      affectedProjects: string[];
-      workspaceLayout: {
-        libsDir: string;
-        appsDir: string;
-      };
-      groupByFolder: boolean;
-      collapseEdges: boolean;
-    }
-  | {
-      type: 'notifyGraphUpdateGraph';
-      projects: ProjectGraphProjectNode[];
-      dependencies: Record<string, ProjectGraphDependency[]>;
-      affectedProjects: string[];
-      workspaceLayout: {
-        libsDir: string;
-        appsDir: string;
-      };
-      groupByFolder: boolean;
-      collapseEdges: boolean;
-      selectedProjects: string[];
-    }
-  | {
-      type: 'notifyGraphFocusProject';
-      projectName: string;
-      searchDepth: number;
-    }
-  | {
-      type: 'notifyGraphShowProject';
-      projectName: string;
-    }
-  | {
-      type: 'notifyGraphHideProject';
-      projectName: string;
-    }
-  | {
-      type: 'notifyGraphShowAllProjects';
-    }
-  | {
-      type: 'notifyGraphHideAllProjects';
-    }
-  | {
-      type: 'notifyGraphShowAffectedProjects';
-    }
-  | {
-      type: 'notifyGraphFilterProjectsByText';
-      search: string;
-      includeProjectsByPath: boolean;
-      searchDepth: number;
-    }
-  | {
-      type: 'notifyGraphTracing';
-      start: string;
-      end: string;
-      algorithm: TracingAlgorithmType;
-    };
-
-export type RouteEvents =
-  | {
-      type: 'notifyRouteFocusProject';
-      focusedProject: string;
-    }
-  | {
-      type: 'notifyRouteGroupByFolder';
-      groupByFolder: boolean;
-    }
-  | {
-      type: 'notifyRouteCollapseEdges';
-      collapseEdges: boolean;
-    }
-  | {
-      type: 'notifyRouteSearchDepth';
-      searchDepthEnabled: boolean;
-      searchDepth: number;
-    }
-  | {
-      type: 'notifyRouteUnfocusProject';
-    }
-  | {
-      type: 'notifyRouteSelectAll';
-    }
-  | {
-      type: 'notifyRouteSelectAffected';
-    }
-  | { type: 'notifyRouteClearSelect' }
-  | {
-      type: 'notifyRouteTracing';
-      start: string;
-      end: string;
-      algorithm: TracingAlgorithmType;
-    };
-
-export type AllEvents = DepGraphUIEvents | GraphRenderEvents | RouteEvents;
-
-// The context (extended state) of the machine
-export interface DepGraphContext {
-  projects: ProjectGraphProjectNode[];
-  dependencies: Record<string, ProjectGraphDependency[]>;
-  affectedProjects: string[];
-  selectedProjects: string[];
-  focusedProject: string | null;
-  textFilter: string;
-  includePath: boolean;
-  searchDepth: number;
-  searchDepthEnabled: boolean;
-  groupByFolder: boolean;
-  collapseEdges: boolean;
-  workspaceLayout: {
-    libsDir: string;
-    appsDir: string;
-  };
-  graphActor: ActorRef<GraphRenderEvents>;
-  routeSetterActor: ActorRef<RouteEvents>;
-  routeListenerActor: ActorRef<DepGraphUIEvents>;
-  lastPerfReport: GraphPerfReport;
-  tracing: {
-    start: string;
-    end: string;
-    algorithm: TracingAlgorithmType;
-  };
-}
-
-export type DepGraphStateNodeConfig = StateNodeConfig<
-  DepGraphContext,
-  {},
-  DepGraphUIEvents,
-  ActionObject<DepGraphContext, DepGraphUIEvents>
->;
-
-export type DepGraphSend = (
-  event: DepGraphUIEvents | DepGraphUIEvents[]
-) => void;
-
-export type DepGraphState = State<
-  DepGraphContext,
-  DepGraphUIEvents,
-  any,
-  {
-    value: any;
-    context: DepGraphContext;
-  }
->;

dep-graph/client/src/app/machines/route-listener.actor.ts

@@ -1,71 +0,0 @@
-import { createBrowserHistory } from 'history';
-import { InvokeCallback } from 'xstate';
-import { DepGraphUIEvents } from './interfaces';
-
-function parseSearchParamsToEvents(searchParams: string): DepGraphUIEvents[] {
-  const events: DepGraphUIEvents[] = [];
-  const params = new URLSearchParams(searchParams);
-
-  params.forEach((value, key) => {
-    switch (key) {
-      case 'select':
-        if (value === 'all') {
-          events.push({ type: 'selectAll' });
-        } else if (value === 'affected') {
-          events.push({ type: 'selectAffected' });
-        }
-        break;
-      case 'focus':
-        events.push({ type: 'focusProject', projectName: value });
-        break;
-      case 'groupByFolder':
-        events.push({ type: 'setGroupByFolder', groupByFolder: true });
-        break;
-      case 'collapseEdges':
-        events.push({ type: 'setCollapseEdges', collapseEdges: true });
-        break;
-      case 'searchDepth':
-        const parsedValue = parseInt(value, 10);
-
-        if (parsedValue === 0) {
-          events.push({
-            type: 'setSearchDepthEnabled',
-            searchDepthEnabled: false,
-          });
-        } else if (parsedValue > 1) {
-          events.push({
-            type: 'setSearchDepth',
-            searchDepth: parseInt(value),
-          });
-        }
-        break;
-      case 'traceAlgorithm':
-        if (value === 'shortest' || value === 'all') {
-          // this needs to go before other tracing options or else the default of 'shortest' gets used
-          events.unshift({ type: 'setTracingAlgorithm', algorithm: value });
-        }
-        break;
-      case 'traceStart':
-        events.push({
-          type: 'setTracingStart',
-          projectName: value,
-        });
-        break;
-      case 'traceEnd':
-        events.push({ type: 'setTracingEnd', projectName: value });
-        break;
-    }
-  });
-  return events;
-}
-
-export const routeListener: InvokeCallback<
-  DepGraphUIEvents,
-  DepGraphUIEvents
-> = (callback) => {
-  const history = createBrowserHistory();
-
-  parseSearchParamsToEvents(history.location.search).forEach((event) =>
-    callback(event)
-  );
-};

dep-graph/client/src/app/machines/route-setter.machine.ts

@@ -1,163 +0,0 @@
-import { assign } from '@xstate/immer';
-import { createBrowserHistory } from 'history';
-import { Machine } from 'xstate';
-import { RouteEvents } from './interfaces';
-
-type ParamKeys =
-  | 'focus'
-  | 'groupByFolder'
-  | 'searchDepth'
-  | 'select'
-  | 'collapseEdges'
-  | 'traceStart'
-  | 'traceEnd'
-  | 'traceAlgorithm';
-type ParamRecord = Record<ParamKeys, string | null>;
-
-function reduceParamRecordToQueryString(params: ParamRecord): string {
-  const newParams = Object.entries(params).reduce((acc, [key, value]) => {
-    if (value !== null) {
-      acc[key] = value;
-    }
-
-    return acc;
-  }, {});
-
-  return new URLSearchParams(newParams).toString();
-}
-
-export const createRouteMachine = () => {
-  const history = createBrowserHistory();
-
-  const params = new URLSearchParams(history.location.search);
-  const paramRecord: ParamRecord = {
-    focus: params.get('focus'),
-    groupByFolder: params.get('groupByFolder'),
-    collapseEdges: params.get('collapseEdges'),
-    searchDepth: params.get('searchDepth'),
-    select: params.get('select'),
-    traceStart: params.get('traceStart'),
-    traceEnd: params.get('traceEnd'),
-    traceAlgorithm: params.get('traceAlgorithm'),
-  };
-
-  const initialContext = {
-    currentParamString: reduceParamRecordToQueryString(paramRecord),
-    params: paramRecord,
-  };
-
-  return Machine<
-    { currentParamString: string; params: Record<ParamKeys, string | null> },
-    {},
-    RouteEvents
-  >(
-    {
-      id: 'route',
-      context: {
-        currentParamString: '',
-        params: {
-          focus: null,
-          groupByFolder: null,
-          searchDepth: null,
-          select: null,
-          collapseEdges: null,
-          traceStart: null,
-          traceEnd: null,
-          traceAlgorithm: null,
-        },
-      },
-      always: {
-        actions: assign((ctx) => {
-          const history = createBrowserHistory();
-
-          const newParamString = reduceParamRecordToQueryString(ctx.params);
-
-          history.push({
-            search: newParamString,
-          });
-
-          ctx.currentParamString = newParamString;
-        }),
-        cond: 'didParamsChange',
-      },
-      on: {
-        notifyRouteSelectAll: {
-          actions: assign((ctx) => {
-            ctx.params.select = 'all';
-            ctx.params.focus = null;
-          }),
-        },
-        notifyRouteSelectAffected: {
-          actions: assign((ctx) => {
-            ctx.params.select = 'affected';
-            ctx.params.focus = null;
-          }),
-        },
-        notifyRouteClearSelect: {
-          actions: assign((ctx) => {
-            ctx.params.select = null;
-          }),
-        },
-        notifyRouteFocusProject: {
-          actions: assign((ctx, event) => {
-            ctx.params.focus = event.focusedProject;
-            ctx.params.select = null;
-          }),
-        },
-        notifyRouteUnfocusProject: {
-          actions: assign((ctx, event) => {
-            ctx.params.focus = null;
-          }),
-        },
-        notifyRouteGroupByFolder: {
-          actions: assign((ctx, event) => {
-            ctx.params.groupByFolder = event.groupByFolder ? 'true' : null;
-          }),
-        },
-        notifyRouteCollapseEdges: {
-          actions: assign((ctx, event) => {
-            ctx.params.collapseEdges = event.collapseEdges ? 'true' : null;
-          }),
-        },
-        notifyRouteSearchDepth: {
-          actions: assign((ctx, event) => {
-            if (event.searchDepthEnabled === false) {
-              ctx.params.searchDepth = '0';
-            } else if (event.searchDepthEnabled && event.searchDepth !== 1) {
-              ctx.params.searchDepth = event.searchDepth.toString();
-            } else {
-              ctx.params.searchDepth = null;
-            }
-          }),
-        },
-        notifyRouteTracing: {
-          actions: assign((ctx, event) => {
-            if (event.start !== null && event.end !== null && event.algorithm) {
-              ctx.params.traceStart = event.start;
-              ctx.params.traceEnd = event.end;
-              ctx.params.traceAlgorithm = event.algorithm;
-
-              ctx.params.focus = null;
-              ctx.params.select = null;
-            } else {
-              ctx.params.traceStart = null;
-              ctx.params.traceEnd = null;
-              ctx.params.traceAlgorithm = null;
-            }
-          }),
-        },
-      },
-    },
-    {
-      guards: {
-        didParamsChange: (ctx) => {
-          const cond =
-            ctx.currentParamString !==
-            reduceParamRecordToQueryString(ctx.params);
-
-          return cond;
-        },
-      },
-    }
-  ).withContext(initialContext);
-};

dep-graph/client/src/app/machines/selectors.ts

@@ -1,56 +0,0 @@
-// nx-ignore-next-line
-import type { ProjectGraphProjectNode } from '@nrwl/devkit';
-import { DepGraphSelector } from '../hooks/use-dep-graph-selector';
-import { WorkspaceLayout } from '../interfaces';
-import { GraphPerfReport, TracingAlgorithmType } from './interfaces';
-
-export const allProjectsSelector: DepGraphSelector<
-  ProjectGraphProjectNode[]
-> = (state) => state.context.projects;
-
-export const workspaceLayoutSelector: DepGraphSelector<WorkspaceLayout> = (
-  state
-) => state.context.workspaceLayout;
-
-export const selectedProjectNamesSelector: DepGraphSelector<string[]> = (
-  state
-) => state.context.selectedProjects;
-
-export const projectIsSelectedSelector: DepGraphSelector<boolean> = (state) =>
-  state.context.selectedProjects.length > 0;
-
-export const lastPerfReportSelector: DepGraphSelector<GraphPerfReport> = (
-  state
-) => state.context.lastPerfReport;
-
-export const focusedProjectNameSelector: DepGraphSelector<string> = (state) =>
-  state.context.focusedProject;
-
-export const searchDepthSelector: DepGraphSelector<{
-  searchDepth: number;
-  searchDepthEnabled: boolean;
-}> = (state) => ({
-  searchDepth: state.context.searchDepth,
-  searchDepthEnabled: state.context.searchDepthEnabled,
-});
-
-export const includePathSelector: DepGraphSelector<boolean> = (state) =>
-  state.context.includePath;
-
-export const groupByFolderSelector: DepGraphSelector<boolean> = (state) =>
-  state.context.groupByFolder;
-
-export const collapseEdgesSelector: DepGraphSelector<boolean> = (state) =>
-  state.context.collapseEdges;
-
-export const textFilterSelector: DepGraphSelector<string> = (state) =>
-  state.context.textFilter;
-
-export const hasAffectedProjectsSelector: DepGraphSelector<boolean> = (state) =>
-  state.context.affectedProjects.length > 0;
-
-export const getTracingInfo: DepGraphSelector<{
-  start: string;
-  end: string;
-  algorithm: TracingAlgorithmType;
-}> = (state) => state.context.tracing;

dep-graph/client/src/app/machines/unselected.state.ts

@@ -1,52 +0,0 @@
-import { assign } from '@xstate/immer';
-import { send, spawn } from 'xstate';
-import { DepGraphStateNodeConfig } from './interfaces';
-import { routeListener } from './route-listener.actor';
-
-export const unselectedStateConfig: DepGraphStateNodeConfig = {
-  entry: [
-    'notifyGraphHideAllProjects',
-    assign((ctx, event) => {
-      if (ctx.routeListenerActor === null) {
-        ctx.routeListenerActor = spawn(routeListener, 'routeListener');
-      }
-    }),
-    'notifyRouteClearSelect',
-  ],
-  on: {
-    updateGraph: {
-      target: 'customSelected',
-      actions: [
-        assign((ctx, event) => {
-          const existingProjectNames = ctx.projects.map(
-            (project) => project.name
-          );
-          const newProjectNames = event.projects.map((project) => project.name);
-          const newSelectedProjects = newProjectNames.filter(
-            (projectName) => !existingProjectNames.includes(projectName)
-          );
-
-          ctx.selectedProjects = [
-            ...ctx.selectedProjects,
-            ...newSelectedProjects,
-          ];
-        }),
-        'setGraph',
-        send(
-          (ctx, event) => ({
-            type: 'notifyGraphUpdateGraph',
-            projects: ctx.projects,
-            dependencies: ctx.dependencies,
-            affectedProjects: ctx.affectedProjects,
-            workspaceLayout: ctx.workspaceLayout,
-            groupByFolder: ctx.groupByFolder,
-            selectedProjects: ctx.selectedProjects,
-          }),
-          {
-            to: (context) => context.graphActor,
-          }
-        ),
-      ],
-    },
-  },
-};

dep-graph/client/src/app/mock-project-graph-service.ts

@@ -1,111 +0,0 @@
-// nx-ignore-next-line
-import type {
-  ProjectGraphDependency,
-  ProjectGraphProjectNode,
-} from '@nrwl/devkit';
-// nx-ignore-next-line
-import type { DepGraphClientResponse } from 'nx/src/command-line/dep-graph';
-import { ProjectGraphService } from '../app/interfaces';
-
-export class MockProjectGraphService implements ProjectGraphService {
-  private response: DepGraphClientResponse = {
-    hash: '79054025255fb1a26e4bc422aef54eb4',
-    layout: {
-      appsDir: 'apps',
-      libsDir: 'libs',
-    },
-    projects: [
-      {
-        name: 'existing-app-1',
-        type: 'app',
-        data: {
-          root: 'apps/app1',
-          tags: [],
-          files: [
-            {
-              file: 'some/file.ts',
-              hash: 'ecccd8481d2e5eae0e59928be1bc4c2d071729d7',
-              deps: ['existing-lib-1'],
-            },
-          ],
-        },
-      },
-      {
-        name: 'existing-lib-1',
-        type: 'lib',
-        data: {
-          root: 'libs/lib1',
-          tags: [],
-          files: [],
-        },
-      },
-    ],
-    dependencies: {
-      'existing-app-1': [
-        {
-          source: 'existing-app-1',
-          target: 'existing-lib-1',
-          type: 'static',
-        },
-      ],
-      'existing-lib-1': [],
-    },
-    affected: [],
-    focus: null,
-    exclude: [],
-    groupByFolder: false,
-  };
-
-  constructor(updateFrequency: number = 5000) {
-    setInterval(() => this.updateResponse(), updateFrequency);
-  }
-
-  async getHash(): Promise<string> {
-    return new Promise((resolve) => resolve(this.response.hash));
-  }
-
-  getProjectGraph(url: string): Promise<DepGraphClientResponse> {
-    return new Promise((resolve) => resolve(this.response));
-  }
-
-  private createNewProject(): ProjectGraphProjectNode {
-    const type = Math.random() > 0.25 ? 'lib' : 'app';
-    const name = `${type}-${this.response.projects.length + 1}`;
-
-    return {
-      name,
-      type,
-      data: {
-        root: type === 'app' ? `apps/${name}` : `libs/${name}`,
-        tags: [],
-        files: [],
-      },
-    };
-  }
-
-  private updateResponse() {
-    const newProject = this.createNewProject();
-    const libProjects = this.response.projects.filter(
-      (project) => project.type === 'lib'
-    );
-
-    const targetDependency =
-      libProjects[Math.floor(Math.random() * libProjects.length)];
-    const newDependency: ProjectGraphDependency[] = [
-      {
-        source: newProject.name,
-        target: targetDependency.name,
-        type: 'static',
-      },
-    ];
-
-    this.response = {
-      ...this.response,
-      projects: [...this.response.projects, newProject],
-      dependencies: {
-        ...this.response.dependencies,
-        [newProject.name]: newDependency,
-      },
-    };
-  }
-}

dep-graph/client/src/app/project-node-tooltip.tsx

@@ -1,91 +0,0 @@
-import { getDepGraphService } from './machines/dep-graph.service';
-
-export interface ProjectNodeToolTipProps {
-  type: 'app' | 'lib' | 'e2e';
-  id: string;
-  tags: string[];
-}
-
-function ProjectNodeToolTip({ type, id, tags }: ProjectNodeToolTipProps) {
-  const depGraphService = getDepGraphService();
-
-  function onFocus() {
-    depGraphService.send({
-      type: 'focusProject',
-      projectName: id,
-    });
-  }
-
-  function onExclude() {
-    depGraphService.send({
-      type: 'deselectProject',
-      projectName: id,
-    });
-  }
-
-  function onStartTrace() {
-    depGraphService.send({
-      type: 'setTracingStart',
-      projectName: id,
-    });
-  }
-
-  function onEndTrace() {
-    depGraphService.send({
-      type: 'setTracingEnd',
-      projectName: id,
-    });
-  }
-
-  return (
-    <div>
-      <h4>
-        <span className="tag">{type}</span>
-        {id}
-      </h4>
-      {tags.length > 0 ? (
-        <p>
-          <strong>tags</strong>
-          <br></br>
-          {tags.join(', ')}
-        </p>
-      ) : null}
-      <div className="flex">
-        <button onClick={onFocus}>Focus</button>
-        <button onClick={onExclude}>Exclude</button>
-        <button className="flex flex-row items-center" onClick={onStartTrace}>
-          <svg
-            xmlns="http://www.w3.org/2000/svg"
-            className="mr-2 h-5 w-5 text-slate-500"
-            viewBox="0 0 20 20"
-            fill="currentColor"
-          >
-            <path
-              fillRule="evenodd"
-              d="M5.05 4.05a7 7 0 119.9 9.9L10 18.9l-4.95-4.95a7 7 0 010-9.9zM10 11a2 2 0 100-4 2 2 0 000 4z"
-              clipRule="evenodd"
-            />
-          </svg>
-          Start
-        </button>
-        <button className="flex flex-row items-center" onClick={onEndTrace}>
-          <svg
-            xmlns="http://www.w3.org/2000/svg"
-            className="mr-2 h-5 w-5 text-slate-500"
-            viewBox="0 0 20 20"
-            fill="currentColor"
-          >
-            <path
-              fillRule="evenodd"
-              d="M3 6a3 3 0 013-3h10a1 1 0 01.8 1.6L14.25 8l2.55 3.4A1 1 0 0116 13H6a1 1 0 00-1 1v3a1 1 0 11-2 0V6z"
-              clipRule="evenodd"
-            />
-          </svg>
-          End
-        </button>
-      </div>
-    </div>
-  );
-}
-
-export default ProjectNodeToolTip;

dep-graph/client/src/app/shell.tsx

@@ -1,180 +0,0 @@
-import { ArrowCircleLeftIcon, DownloadIcon } from '@heroicons/react/solid';
-import Tippy from '@tippyjs/react';
-import classNames from 'classnames';
-// nx-ignore-next-line
-import type { DepGraphClientResponse } from 'nx/src/command-line/dep-graph';
-import { useEffect, useState } from 'react';
-import { useSyncExternalStore } from 'use-sync-external-store/shim';
-
-import DebuggerPanel from './debugger-panel';
-import { useDepGraphService } from './hooks/use-dep-graph';
-import { useDepGraphSelector } from './hooks/use-dep-graph-selector';
-import { useEnvironmentConfig } from './hooks/use-environment-config';
-import { useIntervalWhen } from './hooks/use-interval-when';
-import { useProjectGraphDataService } from './hooks/use-project-graph-data-service';
-import { getGraphService } from './machines/graph.service';
-import {
-  lastPerfReportSelector,
-  projectIsSelectedSelector,
-} from './machines/selectors';
-import Sidebar from './sidebar/sidebar';
-import { selectValueByThemeStatic } from './theme-resolver';
-import { getTooltipService } from './tooltip-service';
-import ProjectNodeToolTip from './project-node-tooltip';
-import EdgeNodeTooltip from './edge-tooltip';
-
-const tooltipService = getTooltipService();
-
-export function Shell() {
-  const depGraphService = useDepGraphService();
-
-  const currentTooltip = useSyncExternalStore(
-    (callback) => tooltipService.subscribe(callback),
-    () => tooltipService.currentTooltip
-  );
-
-  const projectGraphService = useProjectGraphDataService();
-  const environment = useEnvironmentConfig();
-  const lastPerfReport = useDepGraphSelector(lastPerfReportSelector);
-  const projectIsSelected = useDepGraphSelector(projectIsSelectedSelector);
-
-  const [selectedProjectId, setSelectedProjectId] = useState<string>(
-    environment.appConfig.defaultProjectGraph
-  );
-
-  function projectChange(projectGraphId: string) {
-    setSelectedProjectId(projectGraphId);
-  }
-
-  useEffect(() => {
-    const { appConfig } = environment;
-
-    const projectInfo = appConfig.projectGraphs.find(
-      (graph) => graph.id === selectedProjectId
-    );
-
-    const fetchProjectGraph = async () => {
-      const project: DepGraphClientResponse =
-        await projectGraphService.getProjectGraph(projectInfo.url);
-
-      const workspaceLayout = project?.layout;
-      depGraphService.send({
-        type: 'initGraph',
-        projects: project.projects,
-        dependencies: project.dependencies,
-        affectedProjects: project.affected,
-        workspaceLayout: workspaceLayout,
-      });
-    };
-    fetchProjectGraph();
-  }, [selectedProjectId, environment, depGraphService, projectGraphService]);
-
-  useIntervalWhen(
-    () => {
-      const projectInfo = environment.appConfig.projectGraphs.find(
-        (graph) => graph.id === selectedProjectId
-      );
-
-      const fetchProjectGraph = async () => {
-        const project: DepGraphClientResponse =
-          await projectGraphService.getProjectGraph(projectInfo.url);
-
-        depGraphService.send({
-          type: 'updateGraph',
-          projects: project.projects,
-          dependencies: project.dependencies,
-        });
-      };
-
-      fetchProjectGraph();
-    },
-    5000,
-    environment.watch
-  );
-
-  function downloadImage() {
-    const graph = getGraphService();
-    const data = graph.getImage();
-
-    let downloadLink = document.createElement('a');
-    downloadLink.href = data;
-    downloadLink.download = 'graph.png';
-    // this is necessary as link.click() does not work on the latest firefox
-    downloadLink.dispatchEvent(
-      new MouseEvent('click', {
-        bubbles: true,
-        cancelable: true,
-        view: window,
-      })
-    );
-  }
-
-  return (
-    <>
-      <Sidebar></Sidebar>
-      <div
-        id="main-content"
-        className="flex-grow overflow-hidden transition-all"
-      >
-        {environment.appConfig.showDebugger ? (
-          <DebuggerPanel
-            projectGraphs={environment.appConfig.projectGraphs}
-            selectedProjectGraph={selectedProjectId}
-            lastPerfReport={lastPerfReport}
-            projectGraphChange={projectChange}
-          ></DebuggerPanel>
-        ) : null}
-
-        {!projectIsSelected ? (
-          <div
-            id="no-projects-chosen"
-            className="flex text-slate-700 dark:text-slate-400"
-          >
-            <ArrowCircleLeftIcon className="mr-4 h-6 w-6" />
-            <h4>Please select projects in the sidebar.</h4>
-          </div>
-        ) : null}
-        <div id="graph-container">
-          <div id="cytoscape-graph"></div>
-          {currentTooltip ? (
-            <Tippy
-              content={
-                currentTooltip.type === 'node' ? (
-                  <ProjectNodeToolTip
-                    {...currentTooltip.props}
-                  ></ProjectNodeToolTip>
-                ) : (
-                  <EdgeNodeTooltip {...currentTooltip.props}></EdgeNodeTooltip>
-                )
-              }
-              visible={true}
-              getReferenceClientRect={currentTooltip.ref.getBoundingClientRect}
-              theme={selectValueByThemeStatic('dark-nx', 'nx')}
-              interactive={true}
-              appendTo={document.body}
-              maxWidth="none"
-            ></Tippy>
-          ) : null}
-
-          <Tippy
-            content="Download Graph as PNG"
-            placement="right"
-            theme={selectValueByThemeStatic('dark-nx', 'nx')}
-          >
-            <button
-              type="button"
-              className={classNames(
-                !projectIsSelected ? 'opacity-0' : '',
-                'bg-green-nx-base fixed bottom-4 right-4 z-50 block h-16 w-16 transform rounded-full text-white shadow-sm transition duration-300'
-              )}
-              data-cy="downloadImageButton"
-              onClick={downloadImage}
-            >
-              <DownloadIcon className="absolute top-1/2 left-1/2 -mt-3 -ml-3 h-6 w-6" />
-            </button>
-          </Tippy>
-        </div>
-      </div>
-    </>
-  );
-}

dep-graph/client/src/app/sidebar/focused-project-panel.tsx

@@ -1,34 +0,0 @@
-import { ArrowCircleRightIcon, XCircleIcon } from '@heroicons/react/solid';
-import { memo } from 'react';
-
-export interface FocusedProjectPanelProps {
-  focusedProject: string;
-  resetFocus: () => void;
-}
-
-export const FocusedProjectPanel = memo(
-  ({ focusedProject, resetFocus }: FocusedProjectPanelProps) => {
-    return (
-      <div className="mt-10 px-4">
-        <div
-          className="bg-green-nx-base group relative flex cursor-pointer items-center overflow-hidden rounded-md border border-slate-200 p-2 text-slate-50 shadow-sm dark:border-slate-700"
-          data-cy="unfocusButton"
-          onClick={() => resetFocus()}
-        >
-          <p className="truncate transition duration-200 ease-in-out group-hover:opacity-60">
-            <ArrowCircleRightIcon className="-mt-1 mr-1 inline h-6 w-6" />
-            <span id="focused-project-name">Focused on {focusedProject}</span>
-          </p>
-          <div className="absolute right-2 flex translate-x-32 items-center rounded-md bg-white pl-2 text-sm font-medium text-slate-700 shadow-sm ring-1 ring-slate-500 transition-all duration-200 ease-in-out group-hover:translate-x-0 dark:bg-slate-800 dark:text-slate-300">
-            Reset
-            <span className="rounded-md p-1">
-              <XCircleIcon className="h-5 w-5" />
-            </span>
-          </div>
-        </div>
-      </div>
-    );
-  }
-);
-
-export default FocusedProjectPanel;

dep-graph/client/src/app/sidebar/group-by-folder-panel.tsx

@@ -1,41 +0,0 @@
-import { memo } from 'react';
-
-export interface DisplayOptionsPanelProps {
-  groupByFolder: boolean;
-  groupByFolderChanged: (checked: boolean) => void;
-}
-
-export const GroupByFolderPanel = memo(
-  ({ groupByFolder, groupByFolderChanged }: DisplayOptionsPanelProps) => {
-    return (
-      <div className="mt-8 px-4">
-        <div className="flex items-start">
-          <div className="flex h-5 items-center">
-            <input
-              id="displayOptions"
-              name="displayOptions"
-              value="groupByFolder"
-              type="checkbox"
-              className="h-4 w-4 rounded border-slate-300 dark:border-slate-700"
-              onChange={(event) => groupByFolderChanged(event.target.checked)}
-              checked={groupByFolder}
-            ></input>
-          </div>
-          <div className="ml-3 text-sm">
-            <label
-              htmlFor="displayOptions"
-              className="cursor-pointer font-medium text-slate-600 dark:text-slate-400"
-            >
-              Group by folder
-            </label>
-            <p className="text-slate-400 dark:text-slate-500">
-              Visually arrange libraries by folders with different colors.
-            </p>
-          </div>
-        </div>
-      </div>
-    );
-  }
-);
-
-export default GroupByFolderPanel;

dep-graph/client/src/app/sidebar/project-list.tsx

@@ -1,358 +0,0 @@
-import {
-  DocumentSearchIcon,
-  FlagIcon,
-  LocationMarkerIcon,
-} from '@heroicons/react/solid';
-// nx-ignore-next-line
-import type { ProjectGraphNode } from '@nrwl/devkit';
-import { useDepGraphService } from '../hooks/use-dep-graph';
-import { useDepGraphSelector } from '../hooks/use-dep-graph-selector';
-import {
-  allProjectsSelector,
-  getTracingInfo,
-  selectedProjectNamesSelector,
-  workspaceLayoutSelector,
-} from '../machines/selectors';
-import { parseParentDirectoriesFromFilePath } from '../util';
-import { TracingAlgorithmType } from '../machines/interfaces';
-import ExperimentalFeature from '../experimental-feature';
-
-function getProjectsByType(type: string, projects: ProjectGraphNode[]) {
-  return projects
-    .filter((project) => project.type === type)
-    .sort((a, b) => a.name.localeCompare(b.name));
-}
-
-interface SidebarProject {
-  projectGraphNode: ProjectGraphNode;
-  isSelected: boolean;
-}
-
-type DirectoryProjectRecord = Record<string, SidebarProject[]>;
-
-interface TracingInfo {
-  start: string;
-  end: string;
-  algorithm: TracingAlgorithmType;
-}
-
-function groupProjectsByDirectory(
-  projects: ProjectGraphNode[],
-  selectedProjects: string[],
-  workspaceLayout: { appsDir: string; libsDir: string }
-): DirectoryProjectRecord {
-  let groups = {};
-
-  projects.forEach((project) => {
-    const workspaceRoot =
-      project.type === 'app' || project.type === 'e2e'
-        ? workspaceLayout.appsDir
-        : workspaceLayout.libsDir;
-    const directories = parseParentDirectoriesFromFilePath(
-      project.data.root,
-      workspaceRoot
-    );
-
-    const directory = directories.join('/');
-
-    if (!groups.hasOwnProperty(directory)) {
-      groups[directory] = [];
-    }
-    groups[directory].push({
-      projectGraphNode: project,
-      isSelected: selectedProjects.includes(project.name),
-    });
-  });
-
-  return groups;
-}
-
-function ProjectListItem({
-  project,
-  toggleProject,
-  focusProject,
-  startTrace,
-  endTrace,
-  tracingInfo,
-}: {
-  project: SidebarProject;
-  toggleProject: (projectId: string, currentlySelected: boolean) => void;
-  focusProject: (projectId: string) => void;
-  startTrace: (projectId: string) => void;
-  endTrace: (projectId: string) => void;
-  tracingInfo: TracingInfo;
-}) {
-  return (
-    <li className="relative block cursor-default select-none py-1 pl-2 pr-6 text-xs text-slate-600 dark:text-slate-400">
-      <div className="flex items-center">
-        <button
-          data-cy={`focus-button-${project.projectGraphNode.name}`}
-          type="button"
-          className="mr-1 flex rounded-md"
-          title="Focus on this library"
-          onClick={() => focusProject(project.projectGraphNode.name)}
-        >
-          <span className="flex items-center rounded-md border-slate-300 bg-white p-1 font-medium text-slate-700 shadow-sm ring-1 ring-slate-200 transition hover:bg-slate-50 dark:border-slate-600 dark:bg-slate-800 dark:text-slate-400 dark:ring-slate-600 hover:dark:bg-slate-700">
-            <DocumentSearchIcon className="h-5 w-5" />
-          </span>
-        </button>
-
-        <ExperimentalFeature>
-          <button
-            type="button"
-            className="mr-1 flex rounded-md"
-            title="Start Trace"
-            onClick={() => startTrace(project.projectGraphNode.name)}
-          >
-            <span
-              className={`${
-                tracingInfo.start === project.projectGraphNode.name
-                  ? 'ring-blue-nx-base'
-                  : 'ring-slate-200 dark:ring-slate-600'
-              } flex items-center rounded-md bg-white p-1 font-medium  shadow-sm ring-1 transition hover:bg-slate-50 dark:bg-slate-800 dark:text-slate-400 dark:ring-slate-600 hover:dark:bg-slate-700`}
-            >
-              <LocationMarkerIcon className="h-5 w-5" />
-            </span>
-          </button>
-
-          <button
-            type="button"
-            className="flex rounded-md"
-            title="End Trace"
-            onClick={() => endTrace(project.projectGraphNode.name)}
-          >
-            <span
-              className={`${
-                tracingInfo.end === project.projectGraphNode.name
-                  ? 'ring-blue-nx-base'
-                  : 'ring-slate-200 dark:ring-slate-600'
-              } flex items-center rounded-md bg-white p-1 font-medium  shadow-sm ring-1 transition hover:bg-slate-50 dark:bg-slate-800 dark:text-slate-400 dark:ring-slate-600 hover:dark:bg-slate-700`}
-            >
-              <FlagIcon className="h-5 w-5" />
-            </span>
-          </button>
-        </ExperimentalFeature>
-
-        <label
-          className="ml-2 block w-full cursor-pointer truncate rounded-md p-2 font-mono font-normal transition hover:bg-slate-50 hover:dark:bg-slate-700"
-          data-project={project.projectGraphNode.name}
-          title={project.projectGraphNode.name}
-          data-active={project.isSelected.toString()}
-          onClick={() =>
-            toggleProject(project.projectGraphNode.name, project.isSelected)
-          }
-        >
-          {project.projectGraphNode.name}
-        </label>
-      </div>
-
-      {project.isSelected ? (
-        <span
-          title="This library is visible"
-          className="text-green-nx-base absolute inset-y-0 right-0 flex cursor-pointer items-center"
-          onClick={() =>
-            toggleProject(project.projectGraphNode.name, project.isSelected)
-          }
-        >
-          <svg
-            xmlns="http://www.w3.org/2000/svg"
-            className="h-5 w-5"
-            fill="none"
-            viewBox="0 0 24 24"
-            stroke="currentColor"
-          >
-            <path
-              strokeLinecap="round"
-              strokeLinejoin="round"
-              strokeWidth="2"
-              d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"
-            />
-            <path
-              strokeLinecap="round"
-              strokeLinejoin="round"
-              strokeWidth="2"
-              d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"
-            />
-          </svg>
-        </span>
-      ) : null}
-    </li>
-  );
-}
-
-function SubProjectList({
-  headerText = '',
-  projects,
-  selectProject,
-  deselectProject,
-  focusProject,
-  startTrace,
-  endTrace,
-  tracingInfo,
-}: {
-  headerText: string;
-  projects: SidebarProject[];
-  selectProject: (projectName: string) => void;
-  deselectProject: (projectName: string) => void;
-  focusProject: (projectName: string) => void;
-  startTrace: (projectId: string) => void;
-  endTrace: (projectId: string) => void;
-  tracingInfo: TracingInfo;
-}) {
-  let sortedProjects = [...projects];
-  sortedProjects.sort((a, b) => {
-    return a.projectGraphNode.name.localeCompare(b.projectGraphNode.name);
-  });
-
-  function toggleProject(projectName: string, currentlySelected: boolean) {
-    if (currentlySelected) {
-      deselectProject(projectName);
-    } else {
-      selectProject(projectName);
-    }
-  }
-
-  return (
-    <>
-      {headerText !== '' ? (
-        <h3 className="mt-4 cursor-text py-2 text-sm font-semibold uppercase tracking-wide text-slate-800 dark:text-slate-200 lg:text-xs">
-          {headerText}
-        </h3>
-      ) : null}
-      <ul className="mt-2 -ml-3">
-        {sortedProjects.map((project) => {
-          return (
-            <ProjectListItem
-              key={project.projectGraphNode.name}
-              project={project}
-              toggleProject={toggleProject}
-              focusProject={focusProject}
-              startTrace={startTrace}
-              endTrace={endTrace}
-              tracingInfo={tracingInfo}
-            ></ProjectListItem>
-          );
-        })}
-      </ul>
-    </>
-  );
-}
-
-export function ProjectList() {
-  const depGraphService = useDepGraphService();
-  const tracingInfo = useDepGraphSelector(getTracingInfo);
-
-  function deselectProject(projectName: string) {
-    depGraphService.send({ type: 'deselectProject', projectName });
-  }
-
-  function selectProject(projectName: string) {
-    depGraphService.send({ type: 'selectProject', projectName });
-  }
-
-  function focusProject(projectName: string) {
-    depGraphService.send({ type: 'focusProject', projectName });
-  }
-
-  function startTrace(projectName: string) {
-    depGraphService.send({ type: 'setTracingStart', projectName });
-  }
-
-  function endTrace(projectName: string) {
-    depGraphService.send({ type: 'setTracingEnd', projectName });
-  }
-
-  const projects = useDepGraphSelector(allProjectsSelector);
-  const workspaceLayout = useDepGraphSelector(workspaceLayoutSelector);
-  const selectedProjects = useDepGraphSelector(selectedProjectNamesSelector);
-
-  const appProjects = getProjectsByType('app', projects);
-  const libProjects = getProjectsByType('lib', projects);
-  const e2eProjects = getProjectsByType('e2e', projects);
-
-  const appDirectoryGroups = groupProjectsByDirectory(
-    appProjects,
-    selectedProjects,
-    workspaceLayout
-  );
-  const libDirectoryGroups = groupProjectsByDirectory(
-    libProjects,
-    selectedProjects,
-    workspaceLayout
-  );
-  const e2eDirectoryGroups = groupProjectsByDirectory(
-    e2eProjects,
-    selectedProjects,
-    workspaceLayout
-  );
-
-  const sortedAppDirectories = Object.keys(appDirectoryGroups).sort();
-  const sortedLibDirectories = Object.keys(libDirectoryGroups).sort();
-  const sortedE2EDirectories = Object.keys(e2eDirectoryGroups).sort();
-
-  return (
-    <div id="project-lists" className="mt-8 border-t border-slate-400/10 px-4">
-      <h2 className="mt-8 border-b border-solid border-slate-200/10 text-lg font-light text-slate-400 dark:text-slate-500">
-        app projects
-      </h2>
-
-      {sortedAppDirectories.map((directoryName) => {
-        return (
-          <SubProjectList
-            key={'app-' + directoryName}
-            headerText={directoryName}
-            projects={appDirectoryGroups[directoryName]}
-            deselectProject={deselectProject}
-            selectProject={selectProject}
-            focusProject={focusProject}
-            startTrace={startTrace}
-            endTrace={endTrace}
-            tracingInfo={tracingInfo}
-          ></SubProjectList>
-        );
-      })}
-
-      <h2 className="mt-8 border-b border-solid border-slate-200/10 text-lg font-light">
-        e2e projects
-      </h2>
-
-      {sortedE2EDirectories.map((directoryName) => {
-        return (
-          <SubProjectList
-            key={'e2e-' + directoryName}
-            headerText={directoryName}
-            projects={e2eDirectoryGroups[directoryName]}
-            deselectProject={deselectProject}
-            selectProject={selectProject}
-            focusProject={focusProject}
-            startTrace={startTrace}
-            endTrace={endTrace}
-            tracingInfo={tracingInfo}
-          ></SubProjectList>
-        );
-      })}
-
-      <h2 className="mt-8 border-b border-solid border-slate-200/10 text-lg font-light">
-        lib projects
-      </h2>
-
-      {sortedLibDirectories.map((directoryName) => {
-        return (
-          <SubProjectList
-            key={'lib-' + directoryName}
-            headerText={directoryName}
-            projects={libDirectoryGroups[directoryName]}
-            deselectProject={deselectProject}
-            selectProject={selectProject}
-            focusProject={focusProject}
-            startTrace={startTrace}
-            endTrace={endTrace}
-            tracingInfo={tracingInfo}
-          ></SubProjectList>
-        );
-      })}
-    </div>
-  );
-}
-
-export default ProjectList;

dep-graph/client/src/app/sidebar/search-depth.tsx

@@ -1,104 +0,0 @@
-import { memo } from 'react';
-
-export interface SearchDepthProps {
-  searchDepth: number;
-  searchDepthEnabled: boolean;
-  searchDepthFilterEnabledChange: (checked: boolean) => void;
-  decrementDepthFilter: () => void;
-  incrementDepthFilter: () => void;
-}
-
-export const SearchDepth = memo(
-  ({
-    searchDepth,
-    searchDepthEnabled,
-    searchDepthFilterEnabledChange,
-    decrementDepthFilter,
-    incrementDepthFilter,
-  }: SearchDepthProps) => {
-    return (
-      <div className="mt-4 px-4">
-        <div className="mt-4 flex items-start">
-          <div className="flex h-5 items-center">
-            <input
-              id="depthFilter"
-              name="depthFilter"
-              value="depthFilterActivated"
-              type="checkbox"
-              className="h-4 w-4 rounded border-slate-300 dark:text-slate-700"
-              checked={searchDepthEnabled}
-              onChange={(event) =>
-                searchDepthFilterEnabledChange(event.target.checked)
-              }
-            ></input>
-          </div>
-          <div className="ml-3 text-sm">
-            <label
-              htmlFor="depthFilter"
-              className="cursor-pointer font-medium text-slate-600 dark:text-slate-400"
-            >
-              Activate proximity
-            </label>
-            <p className="text-slate-400 dark:text-slate-500">
-              Explore connected libraries step by step.
-            </p>
-          </div>
-        </div>
-        <div className="mt-3 px-10">
-          <div className="flex rounded-md shadow-sm">
-            <button
-              data-cy="decrement-depth-filter"
-              title="Remove ancestor level"
-              className="inline-flex items-center rounded-l-md border border-slate-300 bg-slate-50 py-2 px-4 text-slate-500 hover:bg-slate-100 dark:border-slate-600 dark:bg-slate-800 dark:text-slate-300 hover:dark:bg-slate-700"
-              onClick={decrementDepthFilter}
-            >
-              <svg
-                xmlns="http://www.w3.org/2000/svg"
-                className="h-4 w-4"
-                fill="none"
-                viewBox="0 0 24 24"
-                stroke="currentColor"
-              >
-                <path
-                  strokeLinecap="round"
-                  strokeLinejoin="round"
-                  strokeWidth="2"
-                  d="M20 12H4"
-                />
-              </svg>
-            </button>
-            <span
-              id="depthFilterValue"
-              className="block w-full flex-1 rounded-none border-t border-b border-slate-300 bg-white p-1.5 text-center font-mono dark:border-slate-600 dark:bg-slate-800 dark:text-slate-300 hover:dark:bg-slate-700"
-            >
-              {searchDepth}
-            </span>
-            <button
-              data-cy="increment-depth-filter"
-              title="Add ancestor level"
-              className="inline-flex items-center rounded-r-md border border-slate-300 bg-slate-50 py-2 px-4 text-slate-500 hover:bg-slate-100 dark:border-slate-600 dark:bg-slate-800 dark:text-slate-300 hover:dark:bg-slate-700"
-              onClick={incrementDepthFilter}
-            >
-              <svg
-                xmlns="http://www.w3.org/2000/svg"
-                className="h-4 w-4"
-                fill="none"
-                viewBox="0 0 24 24"
-                stroke="currentColor"
-              >
-                <path
-                  strokeLinecap="round"
-                  strokeLinejoin="round"
-                  strokeWidth="2"
-                  d="M12 6v6m0 0v6m0-6h6m-6 0H6"
-                />
-              </svg>
-            </button>
-          </div>
-        </div>
-      </div>
-    );
-  }
-);
-
-export default SearchDepth;

dep-graph/client/src/app/sidebar/show-hide-projects.tsx

@@ -1,100 +0,0 @@
-import { memo } from 'react';
-
-export interface ShowHideAllProjectsProps {
-  showAllProjects: () => void;
-  hideAllProjects: () => void;
-  showAffectedProjects: () => void;
-  hasAffectedProjects: boolean;
-}
-
-export const ShowHideAllProjects = memo(
-  ({
-    showAllProjects,
-    hideAllProjects,
-    showAffectedProjects,
-    hasAffectedProjects: affectedProjects,
-  }: ShowHideAllProjectsProps) => {
-    return (
-      <div className="mt-8 px-4">
-        <button
-          onClick={showAllProjects}
-          type="button"
-          className="flex w-full items-center rounded-md border border-slate-300 bg-white px-4 py-2 text-sm font-medium text-slate-700 shadow-sm hover:bg-slate-50 dark:border-slate-600 dark:bg-slate-800 dark:text-slate-300 hover:dark:bg-slate-700"
-          data-cy="selectAllButton"
-        >
-          <svg
-            xmlns="http://www.w3.org/2000/svg"
-            className="-ml-1 mr-2 h-5 w-5 text-slate-400"
-            fill="none"
-            viewBox="0 0 24 24"
-            stroke="currentColor"
-          >
-            <path
-              strokeLinecap="round"
-              strokeLinejoin="round"
-              strokeWidth="2"
-              d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"
-            />
-            <path
-              strokeLinecap="round"
-              strokeLinejoin="round"
-              strokeWidth="2"
-              d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"
-            />
-          </svg>
-          Show all projects
-        </button>
-
-        {affectedProjects ? (
-          <button
-            onClick={showAffectedProjects}
-            type="button"
-            className="mt-3 flex w-full items-center rounded-md border border-red-300 bg-white px-4 py-2 text-sm font-medium text-red-500 shadow-sm hover:bg-red-50 dark:border-red-700 dark:bg-slate-800 hover:dark:bg-slate-700"
-            data-cy="affectedButton"
-          >
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              className="-ml-1 mr-2 h-5 w-5 text-red-500"
-              fill="none"
-              viewBox="0 0 24 24"
-              stroke="currentColor"
-            >
-              <path
-                strokeLinecap="round"
-                strokeLinejoin="round"
-                strokeWidth="2"
-                d="M13 10V3L4 14h7v7l9-11h-7z"
-              />
-            </svg>
-            Show affected projects
-          </button>
-        ) : null}
-
-        <button
-          onClick={hideAllProjects}
-          type="button"
-          className="mt-3 flex w-full items-center rounded-md border border-slate-300 bg-white px-4 py-2 text-sm font-medium text-slate-700 shadow-sm hover:bg-slate-50 dark:border-slate-600 dark:bg-slate-800 dark:text-slate-300 hover:dark:bg-slate-700"
-          data-cy="deselectAllButton"
-        >
-          <svg
-            xmlns="http://www.w3.org/2000/svg"
-            className="-ml-1 mr-2 h-5 w-5 text-slate-500"
-            fill="none"
-            viewBox="0 0 24 24"
-            stroke="currentColor"
-          >
-            <path
-              strokeLinecap="round"
-              strokeLinejoin="round"
-              strokeWidth="2"
-              d="M13.875 18.825A10.05 10.05 0 0112 19c-4.478 0-8.268-2.943-9.543-7a9.97 9.97 0 011.563-3.029m5.858.908a3 3 0 114.243 4.243M9.878 9.878l4.242 4.242M9.88 9.88l-3.29-3.29m7.532 7.532l3.29 3.29M3 3l3.59 3.59m0 0A9.953 9.953 0 0112 5c4.478 0 8.268 2.943 9.543 7a10.025 10.025 0 01-4.132 5.411m0 0L21 21"
-            />
-          </svg>
-          Hide all projects
-        </button>
-      </div>
-    );
-  }
-);
-
-export default ShowHideAllProjects;

dep-graph/client/src/app/sidebar/sidebar.tsx

@@ -1,220 +0,0 @@
-import { InformationCircleIcon } from '@heroicons/react/solid';
-import { useCallback } from 'react';
-import ExperimentalFeature from '../experimental-feature';
-import { useDepGraphService } from '../hooks/use-dep-graph';
-import { useDepGraphSelector } from '../hooks/use-dep-graph-selector';
-import {
-  collapseEdgesSelector,
-  focusedProjectNameSelector,
-  getTracingInfo,
-  groupByFolderSelector,
-  hasAffectedProjectsSelector,
-  includePathSelector,
-  searchDepthSelector,
-  textFilterSelector,
-} from '../machines/selectors';
-import CollapseEdgesPanel from './collapse-edges-panel';
-import FocusedProjectPanel from './focused-project-panel';
-import GroupByFolderPanel from './group-by-folder-panel';
-import ProjectList from './project-list';
-import SearchDepth from './search-depth';
-import ShowHideProjects from './show-hide-projects';
-import TextFilterPanel from './text-filter-panel';
-import ThemePanel from './theme-panel';
-import TracingPanel from './tracing-panel';
-import { TracingAlgorithmType } from '../machines/interfaces';
-
-export function Sidebar() {
-  const depGraphService = useDepGraphService();
-  const focusedProject = useDepGraphSelector(focusedProjectNameSelector);
-  const searchDepthInfo = useDepGraphSelector(searchDepthSelector);
-  const includePath = useDepGraphSelector(includePathSelector);
-  const textFilter = useDepGraphSelector(textFilterSelector);
-  const hasAffectedProjects = useDepGraphSelector(hasAffectedProjectsSelector);
-  const groupByFolder = useDepGraphSelector(groupByFolderSelector);
-  const collapseEdges = useDepGraphSelector(collapseEdgesSelector);
-
-  const isTracing = depGraphService.state.matches('tracing');
-
-  // const isTracing = depGraphService.state.matches('tracing');
-  const tracingInfo = useDepGraphSelector(getTracingInfo);
-
-  function resetFocus() {
-    depGraphService.send({ type: 'unfocusProject' });
-  }
-
-  function showAllProjects() {
-    depGraphService.send({ type: 'selectAll' });
-  }
-
-  function hideAllProjects() {
-    depGraphService.send({ type: 'deselectAll' });
-  }
-
-  function showAffectedProjects() {
-    depGraphService.send({ type: 'selectAffected' });
-  }
-
-  function searchDepthFilterEnabledChange(checked: boolean) {
-    depGraphService.send({
-      type: 'setSearchDepthEnabled',
-      searchDepthEnabled: checked,
-    });
-  }
-
-  function groupByFolderChanged(checked: boolean) {
-    depGraphService.send({ type: 'setGroupByFolder', groupByFolder: checked });
-  }
-
-  function collapseEdgesChanged(checked: boolean) {
-    depGraphService.send({ type: 'setCollapseEdges', collapseEdges: checked });
-  }
-
-  function incrementDepthFilter() {
-    depGraphService.send({ type: 'incrementSearchDepth' });
-  }
-
-  function decrementDepthFilter() {
-    depGraphService.send({ type: 'decrementSearchDepth' });
-  }
-
-  function resetTextFilter() {
-    depGraphService.send({ type: 'clearTextFilter' });
-  }
-
-  function includeLibsInPathChange() {
-    depGraphService.send({
-      type: 'setIncludeProjectsByPath',
-      includeProjectsByPath: !includePath,
-    });
-  }
-
-  function resetTraceStart() {
-    depGraphService.send({ type: 'clearTraceStart' });
-  }
-
-  function resetTraceEnd() {
-    depGraphService.send({ type: 'clearTraceEnd' });
-  }
-
-  function setAlgorithm(algorithm: TracingAlgorithmType) {
-    depGraphService.send({ type: 'setTracingAlgorithm', algorithm: algorithm });
-  }
-
-  const updateTextFilter = useCallback(
-    (textFilter: string) => {
-      depGraphService.send({ type: 'filterByText', search: textFilter });
-    },
-    [depGraphService]
-  );
-
-  return (
-    <div
-      className="relative flex h-full w-72 flex-col overflow-y-scroll pb-10 shadow-lg ring-1 ring-slate-900/10 ring-opacity-10 transition-all dark:ring-slate-300/10"
-      id="sidebar"
-    >
-      <div className="bg-blue-nx-base border-b border-slate-900/10 dark:border-slate-300/10 dark:bg-transparent">
-        <div className="mx-4 my-5 flex items-center justify-between">
-          <svg
-            className="h-12 w-auto text-white"
-            viewBox="0 0 24 24"
-            fill="currentColor"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <title>Nx</title>
-            <path d="M11.987 14.138l-3.132 4.923-5.193-8.427-.012 8.822H0V4.544h3.691l5.247 8.833.005-3.998 3.044 4.759zm.601-5.761c.024-.048 0-3.784.008-3.833h-3.65c.002.059-.005 3.776-.003 3.833h3.645zm5.634 4.134a2.061 2.061 0 0 0-1.969 1.336 1.963 1.963 0 0 1 2.343-.739c.396.161.917.422 1.33.283a2.1 2.1 0 0 0-1.704-.88zm3.39 1.061c-.375-.13-.8-.277-1.109-.681-.06-.08-.116-.17-.176-.265a2.143 2.143 0 0 0-.533-.642c-.294-.216-.68-.322-1.18-.322a2.482 2.482 0 0 0-2.294 1.536 2.325 2.325 0 0 1 4.002.388.75.75 0 0 0 .836.334c.493-.105.46.36 1.203.518v-.133c-.003-.446-.246-.55-.75-.733zm2.024 1.266a.723.723 0 0 0 .347-.638c-.01-2.957-2.41-5.487-5.37-5.487a5.364 5.364 0 0 0-4.487 2.418c-.01-.026-1.522-2.39-1.538-2.418H8.943l3.463 5.423-3.379 5.32h3.54l1.54-2.366 1.568 2.366h3.541l-3.21-5.052a.7.7 0 0 1-.084-.32 2.69 2.69 0 0 1 2.69-2.691h.001c1.488 0 1.736.89 2.057 1.308.634.826 1.9.464 1.9 1.541a.707.707 0 0 0 1.066.596zm.35.133c-.173.372-.56.338-.755.639-.176.271.114.412.114.412s.337.156.538-.311c.104-.231.14-.488.103-.74z" />
-          </svg>
-          <span className="ml-4 text-xl font-medium text-white">
-            {' '}
-            Project Graph{' '}
-          </span>
-          <ThemePanel />
-        </div>
-      </div>
-
-      <a
-        id="help"
-        className="
-      mt-3
-      flex cursor-pointer
-      items-center
-      px-4
-      text-xs
-      hover:underline
-    "
-        href="https://nx.dev/structure/dependency-graph"
-        rel="noreferrer"
-        target="_blank"
-      >
-        <InformationCircleIcon className="mr-2 h-4 w-4" />
-        Analyse and visualize your workspace.
-      </a>
-
-      {focusedProject ? (
-        <FocusedProjectPanel
-          focusedProject={focusedProject}
-          resetFocus={resetFocus}
-        ></FocusedProjectPanel>
-      ) : null}
-      {isTracing ? (
-        <TracingPanel
-          start={tracingInfo.start}
-          end={tracingInfo.end}
-          algorithm={tracingInfo.algorithm}
-          setAlgorithm={setAlgorithm}
-          resetStart={resetTraceStart}
-          resetEnd={resetTraceEnd}
-        ></TracingPanel>
-      ) : null}
-
-      <TextFilterPanel
-        includePath={includePath}
-        resetTextFilter={resetTextFilter}
-        textFilter={textFilter}
-        toggleIncludeLibsInPathChange={includeLibsInPathChange}
-        updateTextFilter={updateTextFilter}
-      ></TextFilterPanel>
-
-      <div>
-        <ShowHideProjects
-          hideAllProjects={hideAllProjects}
-          showAllProjects={showAllProjects}
-          showAffectedProjects={showAffectedProjects}
-          hasAffectedProjects={hasAffectedProjects}
-        ></ShowHideProjects>
-
-        <GroupByFolderPanel
-          groupByFolder={groupByFolder}
-          groupByFolderChanged={groupByFolderChanged}
-        ></GroupByFolderPanel>
-
-        <SearchDepth
-          searchDepth={searchDepthInfo.searchDepth}
-          searchDepthEnabled={searchDepthInfo.searchDepthEnabled}
-          searchDepthFilterEnabledChange={searchDepthFilterEnabledChange}
-          incrementDepthFilter={incrementDepthFilter}
-          decrementDepthFilter={decrementDepthFilter}
-        ></SearchDepth>
-
-        <ExperimentalFeature>
-          <div
-            data-cy="experimental-features"
-            className="mx-4 mt-4 rounded-lg border-2 border-dashed border-purple-500 p-4 shadow-lg dark:border-purple-600 dark:bg-[#0B1221]"
-          >
-            <h3 className="cursor-text px-4 py-2 text-sm font-semibold uppercase tracking-wide text-slate-800 dark:text-slate-200 lg:text-xs">
-              Experimental Features
-            </h3>
-            <CollapseEdgesPanel
-              collapseEdges={collapseEdges}
-              collapseEdgesChanged={collapseEdgesChanged}
-            ></CollapseEdgesPanel>
-          </div>
-        </ExperimentalFeature>
-      </div>
-
-      <ProjectList></ProjectList>
-    </div>
-  );
-}
-
-export default Sidebar;

dep-graph/client/src/app/sidebar/text-filter-panel.tsx

@@ -1,145 +0,0 @@
-import { useEffect, useState } from 'react';
-import type { KeyboardEvent } from 'react';
-import { useDebounce } from '../hooks/use-debounce';
-
-export interface TextFilterPanelProps {
-  textFilter: string;
-  resetTextFilter: () => void;
-  updateTextFilter: (textFilter: string) => void;
-  toggleIncludeLibsInPathChange: () => void;
-  includePath: boolean;
-}
-
-export function TextFilterPanel({
-  textFilter,
-  resetTextFilter,
-  updateTextFilter,
-  toggleIncludeLibsInPathChange,
-  includePath,
-}: TextFilterPanelProps) {
-  const [currentTextFilter, setCurrentTextFilter] = useState('');
-
-  const [debouncedValue, setDebouncedValue] = useDebounce(
-    currentTextFilter,
-    500
-  );
-
-  function onTextFilterKeyUp(event: KeyboardEvent<HTMLInputElement>) {
-    if (event.key === 'Enter') {
-      updateTextFilter(event.currentTarget.value);
-    }
-  }
-
-  function onTextInputChange(change: string) {
-    if (change === '') {
-      setCurrentTextFilter('');
-      setDebouncedValue('');
-
-      resetTextFilter();
-    } else {
-      setCurrentTextFilter(change);
-    }
-  }
-
-  function resetClicked() {
-    setCurrentTextFilter('');
-    setDebouncedValue('');
-
-    resetTextFilter();
-  }
-
-  useEffect(() => {
-    updateTextFilter(debouncedValue);
-  }, [debouncedValue, updateTextFilter]);
-
-  return (
-    <div>
-      <div className="mt-10 px-4">
-        <form
-          className="group relative flex rounded-md shadow-sm"
-          onSubmit={(event) => event.preventDefault()}
-        >
-          <span className="inline-flex items-center rounded-l-md border border-r-0 border-slate-300 bg-slate-50 p-2 dark:border-slate-900 dark:bg-slate-800">
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              className="h-4 w-4"
-              fill="none"
-              viewBox="0 0 24 24"
-              stroke="currentColor"
-            >
-              <path
-                strokeLinecap="round"
-                strokeLinejoin="round"
-                strokeWidth="2"
-                d="M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.293A1 1 0 013 6.586V4z"
-              />
-            </svg>
-          </span>
-          <input
-            type="text"
-            className={`block w-full flex-1 rounded-none rounded-r-md border border-slate-300 bg-white p-1.5 font-light text-slate-400 placeholder:font-light placeholder:text-slate-400 dark:border-slate-900 dark:bg-slate-800 dark:text-white dark:hover:bg-slate-700`}
-            placeholder="lib name, other lib name"
-            data-cy="textFilterInput"
-            name="filter"
-            value={currentTextFilter}
-            onKeyUp={onTextFilterKeyUp}
-            onChange={(event) => onTextInputChange(event.currentTarget.value)}
-          ></input>
-          {currentTextFilter.length > 0 ? (
-            <button
-              data-cy="textFilterReset"
-              type="reset"
-              onClick={resetClicked}
-              className="absolute top-1 right-1 inline-block rounded-md bg-slate-50 p-1 text-slate-400 dark:bg-slate-800"
-            >
-              <svg
-                xmlns="http://www.w3.org/2000/svg"
-                className="h-5 w-5"
-                fill="none"
-                viewBox="0 0 24 24"
-                stroke="currentColor"
-              >
-                <path
-                  strokeLinecap="round"
-                  strokeLinejoin="round"
-                  strokeWidth="2"
-                  d="M12 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2M3 12l6.414 6.414a2 2 0 001.414.586H19a2 2 0 002-2V7a2 2 0 00-2-2h-8.172a2 2 0 00-1.414.586L3 12z"
-                />
-              </svg>
-            </button>
-          ) : null}
-        </form>
-      </div>
-
-      <div className="mt-4 px-4">
-        <div className="flex items-start">
-          <div className="flex h-5 items-center">
-            <input
-              disabled={textFilter.length === 0}
-              id="includeInPath"
-              name="textFilterCheckbox"
-              type="checkbox"
-              value="includeInPath"
-              className="h-4 w-4 rounded border-slate-300 dark:border-slate-700"
-              checked={includePath}
-              onChange={toggleIncludeLibsInPathChange}
-            ></input>
-          </div>
-          <div className="ml-3 text-sm">
-            <label
-              htmlFor="includeInPath"
-              className="cursor-pointer font-medium text-slate-600 dark:text-slate-400"
-            >
-              Include related libraries
-            </label>
-            <p className="text-slate-400 dark:text-slate-500">
-              Show libraries that are related to your search.
-            </p>
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-}
-
-export default TextFilterPanel;

dep-graph/client/src/app/sidebar/theme-panel.tsx

@@ -1,102 +0,0 @@
-import { Menu, Transition } from '@headlessui/react';
-import { DesktopComputerIcon, MoonIcon, SunIcon } from '@heroicons/react/solid';
-import classNames from 'classnames';
-import { Fragment, useEffect, useState } from 'react';
-import { localStorageThemeKey, Theme, themeResolver } from '../theme-resolver';
-
-export default function ThemePanel() {
-  const [theme, setTheme] = useState(
-    (localStorage.getItem(localStorageThemeKey) as Theme) || 'system'
-  );
-
-  useEffect(() => {
-    themeResolver(theme);
-  }, [theme]);
-
-  return (
-    <Menu as="div" className="relative inline-block text-left">
-      <div>
-        <Menu.Button
-          className="dark:text-green-nx-base inline-flex w-full justify-center rounded-md p-2 text-sm font-medium text-white focus:outline-none focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-opacity-75"
-          data-cy="theme-open-modal-button"
-        >
-          <span className="sr-only">Theme switcher</span>
-          {theme === 'system' && (
-            <DesktopComputerIcon className="h-5 w-5" aria-hidden="true" />
-          )}
-          {theme === 'light' && (
-            <SunIcon className="h-5 w-5" aria-hidden="true" />
-          )}
-          {theme === 'dark' && (
-            <MoonIcon className="h-5 w-5" aria-hidden="true" />
-          )}
-        </Menu.Button>
-      </div>
-      <Transition
-        as={Fragment}
-        enter="transition ease-out duration-100"
-        enterFrom="transform opacity-0 scale-95"
-        enterTo="transform opacity-100 scale-100"
-        leave="transition ease-in duration-75"
-        leaveFrom="transform opacity-100 scale-100"
-        leaveTo="transform opacity-0 scale-95"
-      >
-        <Menu.Items className="absolute right-0 z-50 mt-2 w-36 origin-top-right rounded-md bg-white text-slate-500 shadow-lg ring-1 ring-slate-900/10 ring-opacity-5 focus:outline-none dark:bg-slate-800 dark:text-slate-400 dark:ring-0">
-          <div className="px-1 py-1">
-            <Menu.Item>
-              {({ active }) => (
-                <button
-                  data-cy="system-theme-button"
-                  className={classNames(
-                    theme === 'system' ? 'text-green-nx-base' : '',
-                    active ? 'bg-slate-50 dark:bg-slate-600/30' : '',
-                    'group flex w-full items-center rounded-md px-2 py-2 text-sm'
-                  )}
-                  onClick={() => setTheme('system')}
-                >
-                  <DesktopComputerIcon
-                    className="mr-2 h-5 w-5"
-                    aria-hidden="true"
-                  />
-                  System
-                </button>
-              )}
-            </Menu.Item>
-            <Menu.Item>
-              {({ active }) => (
-                <button
-                  data-cy="light-theme-button"
-                  className={classNames(
-                    theme === 'light' ? 'text-green-nx-base' : '',
-                    active ? 'bg-slate-50 dark:bg-slate-600/30' : '',
-                    'group flex w-full items-center rounded-md px-2 py-2 text-sm'
-                  )}
-                  onClick={() => setTheme('light')}
-                >
-                  <SunIcon className="mr-2 h-5 w-5" aria-hidden="true" />
-                  Light
-                </button>
-              )}
-            </Menu.Item>
-            <Menu.Item>
-              {({ active }) => (
-                <button
-                  data-cy="dark-theme-button"
-                  className={classNames(
-                    theme === 'dark' ? 'text-green-nx-base' : '',
-                    active ? 'bg-slate-50 dark:bg-slate-600/30' : '',
-                    'group flex w-full items-center rounded-md px-2 py-2 text-sm'
-                  )}
-                  onClick={() => setTheme('dark')}
-                >
-                  <MoonIcon className="mr-2 h-5 w-5" aria-hidden="true" />
-                  Dark
-                </button>
-              )}
-            </Menu.Item>
-          </div>
-        </Menu.Items>
-      </Transition>
-    </Menu>
-  );
-}

dep-graph/client/src/app/state.provider.tsx

@@ -1,18 +0,0 @@
-import { createContext } from 'react';
-import { InterpreterFrom } from 'xstate';
-import { depGraphMachine } from './machines/dep-graph.machine';
-import { getDepGraphService } from './machines/dep-graph.service';
-
-export const GlobalStateContext = createContext<
-  InterpreterFrom<typeof depGraphMachine>
->({} as InterpreterFrom<typeof depGraphMachine>);
-
-export const GlobalStateProvider = (props) => {
-  const depGraphService = getDepGraphService();
-
-  return (
-    <GlobalStateContext.Provider value={depGraphService as any}>
-      {props.children}
-    </GlobalStateContext.Provider>
-  );
-};

dep-graph/client/src/app/styles-graph/edges.ts

@@ -1,65 +0,0 @@
-import { Stylesheet } from 'cytoscape';
-import { selectValueByThemeDynamic } from '../theme-resolver';
-import { NrwlPalette } from './palette';
-
-const allEdges: Stylesheet = {
-  selector: 'edge',
-  style: {
-    width: selectValueByThemeDynamic('2px', '1px'),
-    'line-color': selectValueByThemeDynamic(
-      NrwlPalette.gray,
-      NrwlPalette.black
-    ),
-    'text-outline-color': NrwlPalette.black,
-    'text-outline-width': selectValueByThemeDynamic('1px', '0px'),
-    color: selectValueByThemeDynamic(NrwlPalette.white, NrwlPalette.black),
-    'curve-style': 'unbundled-bezier',
-    'target-arrow-shape': 'triangle',
-    'target-arrow-fill': 'filled',
-    'target-arrow-color': selectValueByThemeDynamic(
-      NrwlPalette.gray,
-      NrwlPalette.black
-    ),
-  },
-};
-
-const affectedEdges: Stylesheet = {
-  selector: 'edge.affected',
-  style: {
-    'line-color': NrwlPalette.red,
-    'target-arrow-color': NrwlPalette.red,
-    'curve-style': 'unbundled-bezier',
-  },
-};
-
-const implicitEdges: Stylesheet = {
-  selector: 'edge.implicit',
-  style: {
-    label: 'implicit',
-    'font-size': '16px',
-    'curve-style': 'unbundled-bezier',
-    'text-rotation': 'autorotate',
-  },
-};
-
-const transparentEdges: Stylesheet = {
-  selector: 'edge.transparent',
-  style: { opacity: 0.2 },
-};
-
-const dynamicEdges: Stylesheet = {
-  selector: 'edge.dynamic',
-  style: {
-    'line-dash-pattern': [5, 5],
-    'line-style': 'dashed',
-    'curve-style': 'unbundled-bezier',
-  },
-};
-
-export const edgeStyles: Stylesheet[] = [
-  allEdges,
-  affectedEdges,
-  implicitEdges,
-  dynamicEdges,
-  transparentEdges,
-];

dep-graph/client/src/app/styles-graph/label-width.ts

@@ -1,28 +0,0 @@
-import { NodeSingular } from 'cytoscape';
-
-export class LabelWidthCalculator {
-  private cache: Map<string, number> = new Map<string, number>();
-  private ctx: CanvasRenderingContext2D;
-
-  calculateWidth(node: NodeSingular) {
-    if (!this.ctx) {
-      this.ctx = document.createElement('canvas').getContext('2d');
-      const fStyle = node.style('font-style');
-      const size = node.style('font-size');
-      const family = node.style('font-family');
-      const weight = node.style('font-weight');
-
-      this.ctx.font = fStyle + ' ' + weight + ' ' + size + ' ' + family;
-    }
-    const label = node.data('id');
-
-    if (this.cache.has(label)) {
-      return this.cache.get(label);
-    } else {
-      const width = this.ctx.measureText(node.data('id')).width;
-
-      this.cache.set(label, width);
-      return width;
-    }
-  }
-}

dep-graph/client/src/app/styles-graph/nodes.ts

@@ -1,102 +0,0 @@
-import { Stylesheet } from 'cytoscape';
-import { selectValueByThemeDynamic } from '../theme-resolver';
-import { FONTS } from './fonts';
-import { NrwlPalette } from './palette';
-import { LabelWidthCalculator } from './label-width';
-
-const labelWidthCalculator = new LabelWidthCalculator();
-
-const allNodes: Stylesheet = {
-  selector: 'node',
-  style: {
-    'font-size': '32px',
-    'font-family': FONTS,
-    'border-style': 'solid',
-    'border-color': selectValueByThemeDynamic(
-      NrwlPalette.gray,
-      NrwlPalette.darkGray
-    ),
-    'border-width': selectValueByThemeDynamic('2px', '1px'),
-    'text-halign': 'center',
-    'text-valign': 'center',
-    'padding-left': '16px',
-    color: selectValueByThemeDynamic(NrwlPalette.white, NrwlPalette.black),
-    label: 'data(id)',
-    // width: (node) => node.data('id').length * 16,
-    width: (node) => labelWidthCalculator.calculateWidth(node),
-    backgroundColor: selectValueByThemeDynamic(
-      NrwlPalette.black,
-      NrwlPalette.white
-    ),
-    'transition-property':
-      'background-color, border-color, line-color, target-arrow-color',
-    'transition-duration': 250,
-    'transition-timing-function': 'ease-out',
-    shape: 'round-rectangle',
-  },
-};
-
-const focusedNodes: Stylesheet = {
-  selector: 'node.focused',
-  style: {
-    color: NrwlPalette.white,
-    'border-color': NrwlPalette.gray,
-    backgroundColor: NrwlPalette.green,
-  },
-};
-
-const affectedNodes: Stylesheet = {
-  selector: 'node.affected',
-  style: {
-    color: NrwlPalette.white,
-    'border-color': NrwlPalette.gray,
-    backgroundColor: NrwlPalette.red,
-  },
-};
-
-const parentNodes: Stylesheet = {
-  selector: ':parent',
-  style: {
-    'background-opacity': 0.5,
-    'background-color': NrwlPalette.gray,
-    'border-color': NrwlPalette.darkGray,
-    label: 'data(label)',
-    'text-halign': 'center',
-    'text-valign': 'top',
-    'font-weight': 'bold',
-    'font-size': '48px',
-  },
-};
-
-const highlightedNodes: Stylesheet = {
-  selector: 'node.highlight',
-  style: {
-    color: NrwlPalette.white,
-    'border-color': NrwlPalette.gray,
-    backgroundColor: NrwlPalette.blue,
-  },
-};
-
-const transparentProjectNodes: Stylesheet = {
-  selector: 'node.transparent:childless',
-  style: { opacity: 0.5 },
-};
-
-const transparentParentNodes: Stylesheet = {
-  selector: 'node.transparent:parent',
-  style: {
-    'text-opacity': 0.5,
-    'background-opacity': 0.25,
-    'border-opacity': 0.5,
-  },
-};
-
-export const nodeStyles = [
-  allNodes,
-  focusedNodes,
-  affectedNodes,
-  parentNodes,
-  highlightedNodes,
-  transparentProjectNodes,
-  transparentParentNodes,
-];

dep-graph/client/src/app/styles-graph/palette.ts

@@ -1,11 +0,0 @@
-export enum NrwlPalette {
-  blue = 'hsla(214, 62%, 21%, 1)',
-  green = 'hsla(162, 47%, 50%, 1)',
-  lightBlue = 'hsla(192, 75%, 59%, 1)',
-  gray = 'hsla(0, 0%, 92%, 1)',
-  darkGray = 'hsla(0, 0%, 72%, 1)',
-  black = 'hsla(220, 9%, 46%, 1)',
-  red = 'hsla(347, 92%, 65%, 1)',
-  white = '#fff',
-  stone = '#1c1917',
-}

dep-graph/client/src/app/tooltip-service.ts

@@ -1,48 +0,0 @@
-import { VirtualElement } from '@popperjs/core';
-import { ProjectNodeToolTipProps } from './project-node-tooltip';
-import { EdgeNodeTooltipProps } from './edge-tooltip';
-
-export class GraphTooltipService {
-  private subscribers: Set<Function> = new Set();
-
-  currentTooltip:
-    | { ref: VirtualElement; type: 'node'; props: ProjectNodeToolTipProps }
-    | { ref: VirtualElement; type: 'edge'; props: EdgeNodeTooltipProps };
-
-  openProjectNodeToolTip(ref: VirtualElement, props: ProjectNodeToolTipProps) {
-    this.currentTooltip = { type: 'node', ref, props };
-    this.broadcastChange();
-  }
-
-  openEdgeToolTip(ref: VirtualElement, props: EdgeNodeTooltipProps) {
-    this.currentTooltip = { type: 'edge', ref, props };
-    this.broadcastChange();
-  }
-
-  broadcastChange() {
-    this.subscribers.forEach((subscriber) => subscriber(this.currentTooltip));
-  }
-
-  subscribe(callback: Function) {
-    this.subscribers.add(callback);
-
-    return () => {
-      this.subscribers.delete(callback);
-    };
-  }
-
-  hideAll() {
-    this.currentTooltip = null;
-    this.broadcastChange();
-  }
-}
-
-let tooltipService: GraphTooltipService;
-
-export function getTooltipService(): GraphTooltipService {
-  if (!tooltipService) {
-    tooltipService = new GraphTooltipService();
-  }
-
-  return tooltipService;
-}

dep-graph/client/src/app/util-cytoscape/edge.ts

@@ -1,28 +0,0 @@
-// nx-ignore-next-line
-import type { ProjectGraphDependency } from '@nrwl/devkit';
-import * as cy from 'cytoscape';
-
-export class ProjectEdge {
-  affected = false;
-
-  constructor(private dep: ProjectGraphDependency) {}
-
-  getCytosacpeNodeDef(): cy.NodeDefinition {
-    let edge: cy.EdgeDefinition;
-    edge = {
-      group: 'edges',
-      data: {
-        id: `${this.dep.source}|${this.dep.target}`,
-        source: this.dep.source,
-        target: this.dep.target,
-        type: this.dep.type,
-      },
-    };
-    edge.classes = this.dep.type ?? '';
-    if (this.affected) {
-      edge.classes += ' affected';
-    }
-
-    return edge;
-  }
-}

dep-graph/client/src/app/util-cytoscape/index.ts

@@ -1,4 +0,0 @@
-export * from './cytoscape.models';
-export * from './edge';
-export * from './parent-node';
-export * from './project-node';

dep-graph/client/src/app/util-cytoscape/project-node.ts

@@ -1,97 +0,0 @@
-// nx-ignore-next-line
-import type { ProjectGraphProjectNode } from '@nrwl/devkit';
-import * as cy from 'cytoscape';
-import { parseParentDirectoriesFromFilePath } from '../util';
-
-interface NodeDataDefinition extends cy.NodeDataDefinition {
-  id: string;
-  type: string;
-  tags: string[];
-}
-
-interface Ancestor {
-  id: string;
-  parentId: string;
-  label: string;
-}
-
-export class ProjectNode {
-  affected = false;
-  focused = false;
-
-  constructor(
-    private project: ProjectGraphProjectNode,
-    private workspaceRoot: string
-  ) {}
-
-  getCytoscapeNodeDef(groupByFolder: boolean): cy.NodeDefinition {
-    return {
-      group: 'nodes',
-      data: this.getData(groupByFolder),
-      classes: this.getClasses(),
-      selectable: false,
-      grabbable: false,
-      pannable: true,
-    };
-  }
-
-  private getData(groupByFolder: boolean): NodeDataDefinition {
-    return {
-      id: this.project.name,
-      type: this.project.type,
-      tags: this.project.data.tags,
-      parent:
-        groupByFolder && this.project.data.hasOwnProperty('root')
-          ? this.getParentId()
-          : null,
-      files: this.project.data.files,
-      root: this.project.data.root,
-    };
-  }
-
-  private getClasses(): string {
-    let classes = this.project.type ?? '';
-
-    if (this.affected) {
-      classes += ' affected';
-    }
-
-    return classes;
-  }
-
-  private getParentId(): string | null {
-    const ancestors = this.getAncestors();
-
-    if (ancestors.length > 0) {
-      return ancestors[ancestors.length - 1].id;
-    } else {
-      return null;
-    }
-  }
-
-  public getAncestors(): Ancestor[] {
-    // if there's no root, we can't figure out the parent
-    if (!this.project.data.root) {
-      return [];
-    }
-
-    const directories = parseParentDirectoriesFromFilePath(
-      this.project.data.root,
-      this.workspaceRoot
-    );
-
-    return directories.map((directory, index, allDirectories) => {
-      const label = [...allDirectories].slice(0, index + 1).join('/');
-      const id = `dir-${label}`;
-      const parentId =
-        index > 0
-          ? `dir-${[...allDirectories].slice(0, index).join('/')}`
-          : null;
-      return {
-        label,
-        id,
-        parentId,
-      };
-    });
-  }
-}

dep-graph/client/src/app/util.ts

@@ -1,50 +0,0 @@
-// nx-ignore-next-line
-import { ProjectGraphDependency } from '@nrwl/devkit';
-
-export function trimBackSlash(value: string): string {
-  return value.replace(/\/$/, '');
-}
-
-export function parseParentDirectoriesFromFilePath(
-  path: string,
-  workspaceRoot: string
-) {
-  const directories = path
-    .replace(workspaceRoot, '')
-    .split('/')
-    .filter((directory) => directory !== '');
-  // last directory is the project
-  directories.pop();
-  return directories;
-}
-
-export function hasPath(
-  dependencies: Record<string, ProjectGraphDependency[]>,
-  target: string,
-  node: string,
-  visited: string[],
-  currentSearchDepth: number,
-  maxSearchDepth: number = -1 // -1 indicates unlimited search depth
-) {
-  if (target === node) return true;
-
-  if (maxSearchDepth === -1 || currentSearchDepth <= maxSearchDepth) {
-    for (let d of dependencies[node] || []) {
-      if (visited.indexOf(d.target) > -1) continue;
-      visited.push(d.target);
-      if (
-        hasPath(
-          dependencies,
-          target,
-          d.target,
-          visited,
-          currentSearchDepth + 1,
-          maxSearchDepth
-        )
-      )
-        return true;
-    }
-  }
-
-  return false;
-}

dep-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',
-};

dep-graph/client/src/assets/graphs/affected.json

@@ -1,119 +0,0 @@
-{
-  "hash": "1c2b69586aa096dc5e42eb252d0b5bfb94f20dc969a1e7b6f381a3b13add6928",
-  "layout": {
-    "appsDir": "apps",
-    "libsDir": "libs"
-  },
-  "projects": [
-    {
-      "name": "app1",
-      "type": "app",
-      "data": {
-        "tags": [],
-        "root": "apps/app1"
-      }
-    },
-    {
-      "name": "app2",
-      "type": "app",
-      "data": {
-        "tags": [],
-        "root": "apps/app2"
-      }
-    },
-    {
-      "name": "lib1",
-      "type": "lib",
-      "data": {
-        "tags": [],
-        "root": "libs/lib1"
-      }
-    },
-    {
-      "name": "lib2",
-      "type": "lib",
-      "data": {
-        "tags": [],
-        "root": "libs/lib2"
-      }
-    },
-    {
-      "name": "lib3",
-      "type": "lib",
-      "data": {
-        "tags": [],
-        "root": "libs/lib3"
-      }
-    },
-    {
-      "name": "lib4",
-      "type": "lib",
-      "data": {
-        "tags": [],
-        "root": "libs/lib4"
-      }
-    },
-    {
-      "name": "lib5",
-      "type": "lib",
-      "data": {
-        "tags": [],
-        "root": "libs/lib5"
-      }
-    }
-  ],
-  "dependencies": {
-    "app1": [
-      {
-        "type": "static",
-        "source": "app1",
-        "target": "lib1"
-      }
-    ],
-    "app2": [
-      {
-        "type": "static",
-        "source": "app2",
-        "target": "lib2"
-      },
-      {
-        "type": "static",
-        "source": "app2",
-        "target": "lib5"
-      }
-    ],
-    "lib1": [
-      {
-        "type": "static",
-        "source": "lib1",
-        "target": "lib3"
-      }
-    ],
-    "lib2": [
-      {
-        "type": "static",
-        "source": "lib2",
-        "target": "lib3"
-      }
-    ],
-    "lib3": [
-      {
-        "type": "static",
-        "source": "lib3",
-        "target": "lib4"
-      }
-    ],
-    "lib4": [],
-    "lib5": [
-      {
-        "type": "static",
-        "source": "lib5",
-        "target": "lib4"
-      }
-    ]
-  },
-  "affected": ["lib3", "lib1", "lib2", "app1", "app2"],
-  "changes": {
-    "added": []
-  }
-}

dep-graph/client/src/assets/graphs/collapsing-edges-testing.json

@@ -1,222 +0,0 @@
-{
-  "hash": "1c2b69586aa096dc5e42eb252d0b5bfb94f20dc969a1e7b6f381a3b13add6928",
-  "layout": {
-    "appsDir": "apps",
-    "libsDir": "libs"
-  },
-  "projects": [
-    {
-      "name": "web",
-      "type": "app",
-      "data": {
-        "tags": [],
-        "root": "apps/app1"
-      }
-    },
-    {
-      "name": "admin",
-      "type": "app",
-      "data": {
-        "tags": [],
-        "root": "apps/app2"
-      }
-    },
-    {
-      "name": "core-util-auth",
-      "type": "lib",
-      "data": {
-        "tags": [],
-        "root": "core/util-auth"
-      }
-    },
-    {
-      "name": "web-feature-home-page",
-      "type": "lib",
-      "data": {
-        "tags": [],
-        "root": "web/feature-homepage"
-      }
-    },
-    {
-      "name": "web-feature-search",
-      "type": "lib",
-      "data": {
-        "tags": [],
-        "root": "web/feature-search"
-      }
-    },
-    {
-      "name": "web-data-access",
-      "type": "lib",
-      "data": {
-        "tags": [],
-        "root": "web/feature-search"
-      }
-    },
-    {
-      "name": "admin-feature-users",
-      "type": "lib",
-      "data": {
-        "tags": [],
-        "root": "admin/feature-users"
-      }
-    },
-    {
-      "name": "admin-feature-billing",
-      "type": "lib",
-      "data": {
-        "tags": [],
-        "root": "admin/feature-billing"
-      }
-    },
-    {
-      "name": "admin-data-access",
-      "type": "lib",
-      "data": {
-        "tags": [],
-        "root": "admin/data-access"
-      }
-    },
-    {
-      "name": "shared-components-ui-button",
-      "type": "lib",
-      "data": {
-        "tags": [],
-        "root": "shared/components/ui-button"
-      }
-    },
-    {
-      "name": "shared-components-ui-form",
-      "type": "lib",
-      "data": {
-        "tags": [],
-        "root": "shared/components/ui-form"
-      }
-    },
-    {
-      "name": "shared-util",
-      "type": "lib",
-      "data": {
-        "tags": [],
-        "root": "shared/util"
-      }
-    }
-  ],
-  "dependencies": {
-    "web": [
-      {
-        "type": "dynamic",
-        "source": "web",
-        "target": "web-feature-home-page"
-      },
-      {
-        "type": "dynamic",
-        "source": "web",
-        "target": "web-feature-search"
-      },
-      {
-        "type": "static",
-        "source": "web",
-        "target": "core-util-auth"
-      }
-    ],
-    "admin": [
-      {
-        "type": "dynamic",
-        "source": "admin",
-        "target": "admin-feature-users"
-      },
-      {
-        "type": "dynamic",
-        "source": "admin",
-        "target": "admin-feature-billing"
-      },
-      {
-        "type": "static",
-        "source": "admin",
-        "target": "core-util-auth"
-      }
-    ],
-    "web-feature-home-page": [
-      {
-        "type": "static",
-        "source": "web-feature-home-page",
-        "target": "web-data-access"
-      },
-      {
-        "type": "static",
-        "source": "web-feature-home-page",
-        "target": "shared-components-ui-button"
-      }
-    ],
-    "web-feature-search": [
-      {
-        "type": "static",
-        "source": "web-feature-search",
-        "target": "web-data-access"
-      },
-      {
-        "type": "static",
-        "source": "web-feature-search",
-        "target": "shared-components-ui-button"
-      },
-      {
-        "type": "static",
-        "source": "web-feature-search",
-        "target": "shared-components-ui-form"
-      }
-    ],
-    "web-data-access": [
-      {
-        "type": "static",
-        "source": "web-data-access",
-        "target": "core-util-auth"
-      }
-    ],
-    "admin-feature-users": [
-      {
-        "type": "static",
-        "source": "admin-feature-users",
-        "target": "admin-data-access"
-      },
-      {
-        "type": "static",
-        "source": "admin-feature-users",
-        "target": "shared-components-ui-button"
-      }
-    ],
-    "admin-feature-billing": [
-      {
-        "type": "static",
-        "source": "admin-feature-billing",
-        "target": "admin-data-access"
-      },
-      {
-        "type": "static",
-        "source": "admin-feature-billing",
-        "target": "shared-components-ui-button"
-      }
-    ],
-    "admin-data-access": [
-      {
-        "type": "static",
-        "source": "admin-data-access",
-        "target": "core-util-auth"
-      }
-    ],
-    "core-util-auth": [],
-    "shared-components-ui-button": [],
-    "shared-components-ui-form": [
-      {
-        "type": "static",
-        "source": "shared-components-ui-form",
-        "target": "shared-util"
-      }
-    ],
-    "shared-util": []
-  },
-  "affected": [],
-  "changes": {
-    "added": []
-  }
-}