feat(graph): enable task graph (#13343)

nrwl · Nov 23, 2022 · 17514d2 · 17514d2
1 parent 2d758af
commit 17514d2
Show file tree

Hide file tree

Showing 7 changed files with 2,675 additions and 42 deletions.
diff --git a/graph/client-e2e/src/e2e/dev-app.cy.ts b/graph/client-e2e/src/e2e/dev-app.cy.ts
@@ -26,7 +26,7 @@ describe('dev mode - app', () => {
     cy.intercept('/assets/project-graphs/e2e.json', {
       fixture: 'nx-examples-project-graph.json',
     }).as('getGraph');
-    cy.visit('/');
+    cy.visit('/e2e/projects');
 
     // wait for initial graph to finish loading
     cy.wait('@getGraph');
@@ -35,7 +35,7 @@ describe('dev mode - app', () => {
   describe('theme preferences', () => {
     let systemTheme: string;
     before(() => {
-      cy.visit('/');
+      cy.visit('/e2e/projects');
       systemTheme = window.matchMedia('(prefers-color-scheme: dark)').matches
         ? 'dark'
         : 'light';
@@ -80,7 +80,7 @@ describe('dev mode - app', () => {
   describe('graph layout direction preferences', () => {
     let rankDir: string;
     before(() => {
-      cy.visit('/');
+      cy.visit('/e2e/projects');
       rankDir = 'TB';
     });
 

diff --git a/graph/client-e2e/src/e2e/dev-project-graph.cy.ts b/graph/client-e2e/src/e2e/dev-project-graph.cy.ts
@@ -26,7 +26,7 @@ describe('dev mode - project graph', () => {
     cy.intercept('/assets/project-graphs/e2e.json', {
       fixture: 'nx-examples-project-graph.json',
     }).as('getGraph');
-    cy.visit('/');
+    cy.visit('/e2e/projects');
 
     // wait for initial graph to finish loading
     cy.wait('@getGraph');

diff --git a/graph/client/project.json b/graph/client/project.json
@@ -108,6 +108,11 @@
               "output": "/assets/project-graphs",
               "glob": "e2e.json"
             },
+            {
+              "input": "graph/client/src/assets/task-graphs",
+              "output": "/assets/task-graphs",
+              "glob": "e2e.json"
+            },
             {
               "input": "graph/client/src/assets/release",
               "output": "/",

diff --git a/graph/client/src/app/shell.tsx b/graph/client/src/app/shell.tsx
@@ -6,26 +6,12 @@ import {
 import Tippy from '@tippyjs/react';
 import classNames from 'classnames';
 // nx-ignore-next-line
-import type { ProjectGraphClientResponse } from 'nx/src/command-line/dep-graph';
-import { useEffect, useState } from 'react';
 
 import DebuggerPanel from './ui-components/debugger-panel';
-import { useProjectGraphSelector } from './feature-projects/hooks/use-project-graph-selector';
 import { useEnvironmentConfig } from './hooks/use-environment-config';
-import { useIntervalWhen } from './hooks/use-interval-when';
-import { getProjectGraphDataService } from './hooks/get-project-graph-data-service';
 import { getGraphService } from './machines/graph.service';
-import {
-  lastPerfReportSelector,
-  projectIsSelectedSelector,
-} from './feature-projects/machines/selectors';
 import { selectValueByThemeStatic } from './theme-resolver';
-import {
-  Outlet,
-  useLoaderData,
-  useNavigate,
-  useParams,
-} from 'react-router-dom';
+import { Outlet, useNavigate, useParams } from 'react-router-dom';
 import ThemePanel from './feature-projects/panels/theme-panel';
 import Dropdown from './ui-components/dropdown';
 import { useCurrentPath } from './hooks/use-current-path';
@@ -110,30 +96,28 @@ export function Shell(): JSX.Element {
                   <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>
-                <ExperimentalFeature>
-                  <Dropdown
-                    data-cy="project-select"
-                    defaultValue={
-                      currentRoute.startsWith('/projects')
-                        ? '/projects'
-                        : '/tasks'
+                <Dropdown
+                  data-cy="route-select"
+                  defaultValue={
+                    currentRoute.startsWith('/projects')
+                      ? '/projects'
+                      : '/tasks'
+                  }
+                  onChange={(event) => {
+                    projectGraphService.send('deselectAll');
+                    if (environment.environment === 'dev') {
+                      navigate(
+                        `/${currentPath.workspace}${event.currentTarget.value}`
+                      );
+                    } else {
+                      navigate(`${event.currentTarget.value}`);
                     }
-                    onChange={(event) => {
-                      projectGraphService.send('deselectAll');
-                      if (environment.environment === 'dev') {
-                        navigate(
-                          `/${currentPath.workspace}${event.currentTarget.value}`
-                        );
-                      } else {
-                        navigate(`${event.currentTarget.value}`);
-                      }
-                    }}
-                  >
-                    {routes.map((route) => (
-                      <option value={route.route}>{route.label}</option>
-                    ))}
-                  </Dropdown>
-                </ExperimentalFeature>
+                  }}
+                >
+                  {routes.map((route) => (
+                    <option value={route.route}>{route.label}</option>
+                  ))}
+                </Dropdown>
 
                 <ExperimentalFeature>
                   <RankdirPanel />