chore(graph): add ability to filter tasks without dependencies (#13269)

graph/client/project.json

@@ -63,6 +63,7 @@
           "assets": [
             "graph/client/src/favicon.ico",
             "graph/client/src/assets/project-graphs/",
+            "graph/client/src/assets/task-graphs/",
             "graph/client/src/assets/generated-project-graphs/",
             "graph/client/src/assets/generated-task-graphs/",
             {
@@ -76,6 +77,7 @@
           "assets": [
             "graph/client/src/favicon.ico",
             "graph/client/src/assets/project-graphs/",
+            "graph/client/src/assets/task-graphs/",
             {
               "input": "graph/client/src/assets/dev-e2e",
               "output": "/",

graph/client/src/app/feature-projects/projects-sidebar.tsx

@@ -134,7 +134,7 @@ export function ProjectsSidebar(): JSX.Element {
   useIntervalWhen(
     () => {
       const selectedWorkspaceId =
-        params.selectedProjectId ??
+        params.selectedWorkspaceId ??
         environmentConfig.appConfig.defaultWorkspaceId;
 
       const projectInfo = environmentConfig.appConfig.workspaces.find(

graph/client/src/app/feature-tasks/tasks-sidebar.tsx

@@ -15,11 +15,18 @@ import { useEffect } from 'react';
 import FocusedPanel from '../ui-components/focused-panel';
 import CheckboxPanel from '../ui-components/checkbox-panel';
 
+// nx-ignore-next-line
+import { TargetConfiguration } from 'nx/src/config/workspace-json-project-json';
+
 export function TasksSidebar() {
   const graphService = getGraphService();
   const navigate = useNavigate();
   const params = useParams();
+
   const [searchParams, setSearchParams] = useSearchParams();
+  const groupByProject = searchParams.get('groupByProject') === 'true';
+  const hideTasksWithoutDeps =
+    searchParams.get('filterTasksWithoutDeps') !== 'false';
 
   const selectedProjectRouteData = useRouteLoaderData(
     'selectedWorkspace'
@@ -30,17 +37,27 @@ export function TasksSidebar() {
     'selectedTask'
   ) as TaskGraphClientResponse;
   const { taskGraphs } = routeData;
-  const projects = selectedProjectRouteData.projects;
+  let projects = selectedProjectRouteData.projects;
-  // const projects = selectedProjectRouteData.projects.filter((project) => {
+
-  //   return (
+  if (searchParams.get('filterTasksWithoutDeps') !== 'false') {
-  //     Object.keys(project.data.targets).filter((target) => {
+    projects = projects
-  //       const taskName = `${project.name}:${target}`;
+      .map((project) => {
-  //       return (
+        const targets: { [p: string]: TargetConfiguration } = {};
-  //         taskGraphs[taskName]?.dependencies[taskName]?.length > 0
+
-  //       );
+        Object.keys(project.data.targets).forEach((targetName) => {
-  //     }).length > 0
+          const taskName = `${project.name}:${targetName}`;
-  //   );
+          if (taskGraphs[taskName]?.dependencies[taskName]?.length > 0) {
-  // });
+            targets[targetName] = project.data.targets[targetName];
+          }
+        });
+
+        return Object.keys(targets).length > 0
+          ? { ...project, data: { ...project.data, targets } }
+          : null;
+      })
+      .filter((project) => project !== null);
+  }
+
   const selectedTask = params['selectedTaskId'];
 
   useEffect(() => {
@@ -64,8 +81,6 @@ export function TasksSidebar() {
     }
   }, [params]);
 
-  const groupByProject = searchParams.get('groupByProject') === 'true';
-
   useEffect(() => {
     if (groupByProject) {
       graphService.handleTaskEvent({
@@ -81,23 +96,46 @@ export function TasksSidebar() {
   }, [searchParams]);
 
   function selectTask(taskId: string) {
+    if (taskId === selectedTask) return;
+
     if (selectedTask) {
-      navigate(`../${taskId}`);
+      navigate(
+        { pathname: `../${taskId}`, search: searchParams.toString() },
+        { relative: 'path' }
+      );
     } else {
-      navigate(`./${taskId}`);
+      navigate(
+        { pathname: `${taskId}`, search: searchParams.toString() },
+        { relative: 'path' }
+      );
     }
   }
 
   function resetFocus() {
-    navigate('..');
+    navigate('..', { relative: 'path' });
   }
 
   function groupByProjectChanged(checked) {
+    setSearchParams(
+      (currentSearchParams) => {
+        if (checked) {
+          currentSearchParams.set('groupByProject', 'true');
+        } else {
+          currentSearchParams.delete('groupByProject');
+        }
+
+        return currentSearchParams;
+      },
+      { relative: 'path' }
+    );
+  }
+
+  function hideTasksWithoutDepsChanged(checked) {
     setSearchParams((currentSearchParams) => {
-      if (checked) {
+      if (!checked) {
-        currentSearchParams.set('groupByProject', 'true');
+        currentSearchParams.set('filterTasksWithoutDeps', 'false');
       } else {
-        currentSearchParams.delete('groupByProject');
+        currentSearchParams.delete('filterTasksWithoutDeps');
       }
 
       return currentSearchParams;
@@ -121,6 +159,16 @@ export function TasksSidebar() {
         description={'Visually arrange tasks by project.'}
       />
 
+      <CheckboxPanel
+        checked={hideTasksWithoutDeps}
+        checkChanged={hideTasksWithoutDepsChanged}
+        name={'hideTasksWithoutDeps'}
+        label={'Hide tasks without dependencies'}
+        description={
+          "Don't show tasks without dependencies, which means only that task will be executed when run."
+        }
+      />
+
       <TaskList
         projects={projects}
         workspaceLayout={workspaceLayout}

graph/client/src/app/routes.tsx

@@ -31,9 +31,9 @@ const workspaceDataLoader = async (selectedWorkspaceId: string) => {
   return projectGraph;
 };
 
-const taskDataLoader = async (selectedProjectId: string) => {
+const taskDataLoader = async (selectedWorkspaceId: string) => {
   const projectInfo = appConfig.workspaces.find(
-    (graph) => graph.id === selectedProjectId
+    (graph) => graph.id === selectedWorkspaceId
   );
 
   return await projectGraphDataService.getTaskGraph(projectInfo.taskGraphUrl);
@@ -42,7 +42,6 @@ const taskDataLoader = async (selectedProjectId: string) => {
 const childRoutes: RouteObject[] = [
   {
     path: 'projects',
-    loader: () => {},
     element: <ProjectsSidebar />,
   },
   {
@@ -53,12 +52,18 @@ const childRoutes: RouteObject[] = [
         return redirect(`/projects`);
       }
 
-      const selectedProjectId =
+      const selectedWorkspaceId =
-        params.selectedProjectId ?? appConfig.defaultWorkspaceId;
+        params.selectedWorkspaceId ?? appConfig.defaultWorkspaceId;
-      return taskDataLoader(selectedProjectId);
+      return taskDataLoader(selectedWorkspaceId);
     },
     path: 'tasks',
     id: 'selectedTask',
+    shouldRevalidate: ({ currentParams, nextParams }) => {
+      return (
+        !currentParams.selectedWorkspaceId ||
+        currentParams.selectedWorkspaceId !== nextParams.selectedWorkspaceId
+      );
+    },
     children: [
       {
         index: true,
@@ -85,13 +90,18 @@ export const devRoutes: RouteObject[] = [
         },
       },
       {
-        path: ':selectedProjectId',
+        path: ':selectedWorkspaceId',
         id: 'selectedWorkspace',
         element: <Shell />,
+        shouldRevalidate: ({ currentParams, nextParams }) => {
+          return (
+            currentParams.selectedWorkspaceId !== nextParams.selectedWorkspaceId
+          );
+        },
         loader: async ({ request, params }) => {
-          const selectedProjectId =
+          const selectedWorkspaceId =
-            params.selectedProjectId ?? appConfig.defaultWorkspaceId;
+            params.selectedWorkspaceId ?? appConfig.defaultWorkspaceId;
-          return workspaceDataLoader(selectedProjectId);
+          return workspaceDataLoader(selectedWorkspaceId);
         },
         children: childRoutes,
       },
@@ -107,6 +117,9 @@ export const releaseRoutes: RouteObject[] = [
       const selectedWorkspaceId = appConfig.defaultWorkspaceId;
       return workspaceDataLoader(selectedWorkspaceId);
     },
+    shouldRevalidate: () => {
+      return false;
+    },
     element: <Shell />,
     children: [
       {

graph/client/src/app/shell.tsx

@@ -44,7 +44,7 @@ export function Shell(): JSX.Element {
 
   const navigate = useNavigate();
   const currentPath = useCurrentPath();
-  const { selectedProjectId, selectedTaskId } = useParams();
+  const { selectedWorkspaceId, selectedTaskId } = useParams();
   const taskIsSelected = !!selectedTaskId;
   const currentRoute = currentPath.currentPath;
 
@@ -61,7 +61,7 @@ export function Shell(): JSX.Element {
   ];
 
   function projectChange(projectGraphId: string) {
-    // setSelectedProjectId(projectGraphId);
+    // setselectedWorkspaceId(projectGraphId);
 
     navigate(`/${projectGraphId}${topLevelRoute}`);
   }
@@ -169,7 +169,7 @@ export function Shell(): JSX.Element {
         {environment.appConfig.showDebugger ? (
           <DebuggerPanel
             projects={environment.appConfig.workspaces}
-            selectedProject={selectedProjectId}
+            selectedProject={selectedWorkspaceId}
             lastPerfReport={lastPerfReport}
             selectedProjectChange={projectChange}
           ></DebuggerPanel>

graph/client/src/app/ui-tooltips/task-node-tooltip.tsx

@@ -10,7 +10,7 @@ export interface TaskNodeTooltipProps {
 
 export function TaskNodeTooltip({ id, executor }: TaskNodeTooltipProps) {
   const params = useParams();
-  const selectedWorkspaceId = params['selectedProjectId'];
+  const selectedWorkspaceId = params['selectedWorkspaceId'];
 
   const to = selectedWorkspaceId
     ? `/${selectedWorkspaceId}/tasks/${id}`

graph/client/src/assets/project-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": []
-  }
-}

graph/client/src/assets/project-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": []
-  }
-}

graph/client/src/assets/project-graphs/focus-testing.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": "app",
-      "data": {
-        "tags": [],
-        "root": "libs/lib1"
-      }
-    },
-    {
-      "name": "lib2",
-      "type": "app",
-      "data": {
-        "tags": [],
-        "root": "libs/lib2"
-      }
-    },
-    {
-      "name": "lib3",
-      "type": "app",
-      "data": {
-        "tags": [],
-        "root": "libs/lib3"
-      }
-    },
-    {
-      "name": "lib4",
-      "type": "app",
-      "data": {
-        "tags": [],
-        "root": "libs/lib4"
-      }
-    },
-    {
-      "name": "lib5",
-      "type": "app",
-      "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": [],
-  "changes": {
-    "added": []
-  }
-}

graph/client/src/assets/project-graphs/nested-workspace-layout.json

@@ -1,119 +0,0 @@
-{
-  "hash": "1c2b69586aa096dc5e42eb252d0b5bfb94f20dc969a1e7b6f381a3b13add6928",
-  "layout": {
-    "appsDir": "nested-workspace/apps",
-    "libsDir": "nested-workspace/libs"
-  },
-  "projects": [
-    {
-      "name": "app1",
-      "type": "app",
-      "data": {
-        "tags": [],
-        "root": "nested-workspace/apps/app1"
-      }
-    },
-    {
-      "name": "app2",
-      "type": "app",
-      "data": {
-        "tags": [],
-        "root": "nested-workspace/apps/app2"
-      }
-    },
-    {
-      "name": "lib1",
-      "type": "lib",
-      "data": {
-        "tags": [],
-        "root": "nested-workspace/libs/lib1"
-      }
-    },
-    {
-      "name": "lib2",
-      "type": "lib",
-      "data": {
-        "tags": [],
-        "root": "nested-workspace/libs/lib2"
-      }
-    },
-    {
-      "name": "lib3",
-      "type": "lib",
-      "data": {
-        "tags": [],
-        "root": "nested-workspace/libs/scope/lib3"
-      }
-    },
-    {
-      "name": "lib4",
-      "type": "lib",
-      "data": {
-        "tags": [],
-        "root": "nested-workspace/libs/scope/lib4"
-      }
-    },
-    {
-      "name": "lib5",
-      "type": "lib",
-      "data": {
-        "tags": [],
-        "root": "nested-workspace/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": [],
-  "changes": {
-    "added": []
-  }
-}

graph/client/src/assets/project-graphs/sub-apps.json

@@ -1,55 +0,0 @@
-{
-  "hash": "1c2b69586aa096dc5e42eb252d0b5bfb94f20dc969a1e7b6f381a3b13add6928",
-  "layout": { "appsDir": "apps", "libsDir": "libs" },
-  "projects": [
-    {
-      "name": "sub/app-e2e",
-      "type": "e2e",
-      "data": { "tags": [], "root": "apps/sub/app-e2e" }
-    },
-    {
-      "name": "webapp-e2e",
-      "type": "e2e",
-      "data": { "tags": [], "root": "apps/webapp-e2e" }
-    },
-    {
-      "name": "first-e2e",
-      "type": "e2e",
-      "data": { "tags": [], "root": "apps/first-e2e" }
-    },
-    {
-      "name": "sub-app",
-      "type": "app",
-      "data": { "tags": [], "root": "apps/sub/app" }
-    },
-    {
-      "name": "webapp",
-      "type": "app",
-      "data": { "tags": [], "root": "apps/webapp" }
-    },
-    {
-      "name": "first",
-      "type": "app",
-      "data": { "tags": [], "root": "apps/first" }
-    }
-  ],
-  "dependencies": {
-    "sub/app-e2e": [
-      { "type": "implicit", "source": "sub/app-e2e", "target": "sub-app" }
-    ],
-    "webapp-e2e": [
-      { "type": "implicit", "source": "webapp-e2e", "target": "webapp" }
-    ],
-    "first-e2e": [
-      { "type": "implicit", "source": "first-e2e", "target": "first" }
-    ],
-    "sub-app": [],
-    "webapp": [],
-    "first": []
-  },
-  "changes": { "added": [] },
-  "affected": [],
-  "focus": null,
-  "exclude": [],
-  "groupByFolder": false
-}

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

@@ -0,0 +1,745 @@
+{
+  "taskGraphs": {
+    "products-product-detail-page:lint": {
+      "roots": ["products-product-detail-page:lint"],
+      "tasks": {
+        "products-product-detail-page:lint": {
+          "id": "products-product-detail-page:lint",
+          "target": {
+            "project": "products-product-detail-page",
+            "target": "lint"
+          },
+          "projectRoot": "libs/products/product-detail-page",
+          "overrides": {}
+        }
+      },
+      "dependencies": {
+        "products-product-detail-page:lint": []
+      }
+    },
+    "products-product-detail-page:test": {
+      "roots": ["products-product-detail-page:test"],
+      "tasks": {
+        "products-product-detail-page:test": {
+          "id": "products-product-detail-page:test",
+          "target": {
+            "project": "products-product-detail-page",
+            "target": "test"
+          },
+          "projectRoot": "libs/products/product-detail-page",
+          "overrides": {}
+        }
+      },
+      "dependencies": {
+        "products-product-detail-page:test": []
+      }
+    },
+    "shared-product-state:lint": {
+      "roots": ["shared-product-state:lint"],
+      "tasks": {
+        "shared-product-state:lint": {
+          "id": "shared-product-state:lint",
+          "target": {
+            "project": "shared-product-state",
+            "target": "lint"
+          },
+          "projectRoot": "libs/shared/product/state",
+          "overrides": {}
+        }
+      },
+      "dependencies": {
+        "shared-product-state:lint": []
+      }
+    },
+    "shared-product-state:test": {
+      "roots": ["shared-product-state:test"],
+      "tasks": {
+        "shared-product-state:test": {
+          "id": "shared-product-state:test",
+          "target": {
+            "project": "shared-product-state",
+            "target": "test"
+          },
+          "projectRoot": "libs/shared/product/state",
+          "overrides": {}
+        }
+      },
+      "dependencies": {
+        "shared-product-state:test": []
+      }
+    },
+    "shared-product-types:lint": {
+      "roots": ["shared-product-types:lint"],
+      "tasks": {
+        "shared-product-types:lint": {
+          "id": "shared-product-types:lint",
+          "target": {
+            "project": "shared-product-types",
+            "target": "lint"
+          },
+          "projectRoot": "libs/shared/product/types",
+          "overrides": {}
+        }
+      },
+      "dependencies": {
+        "shared-product-types:lint": []
+      }
+    },
+    "shared-product-data:lint": {
+      "roots": ["shared-product-data:lint"],
+      "tasks": {
+        "shared-product-data:lint": {
+          "id": "shared-product-data:lint",
+          "target": {
+            "project": "shared-product-data",
+            "target": "lint"
+          },
+          "projectRoot": "libs/shared/product/data",
+          "overrides": {}
+        }
+      },
+      "dependencies": {
+        "shared-product-data:lint": []
+      }
+    },
+    "products-home-page:lint": {
+      "roots": ["products-home-page:lint"],
+      "tasks": {
+        "products-home-page:lint": {
+          "id": "products-home-page:lint",
+          "target": {
+            "project": "products-home-page",
+            "target": "lint"
+          },
+          "projectRoot": "libs/products/home-page",
+          "overrides": {}
+        }
+      },
+      "dependencies": {
+        "products-home-page:lint": []
+      }
+    },
+    "products-home-page:test": {
+      "roots": ["products-home-page:test"],
+      "tasks": {
+        "products-home-page:test": {
+          "id": "products-home-page:test",
+          "target": {
+            "project": "products-home-page",
+            "target": "test"
+          },
+          "projectRoot": "libs/products/home-page",
+          "overrides": {}
+        }
+      },
+      "dependencies": {
+        "products-home-page:test": []
+      }
+    },
+    "shared-cart-state:lint": {
+      "roots": ["shared-cart-state:lint"],
+      "tasks": {
+        "shared-cart-state:lint": {
+          "id": "shared-cart-state:lint",
+          "target": {
+            "project": "shared-cart-state",
+            "target": "lint"
+          },
+          "projectRoot": "libs/shared/cart/state",
+          "overrides": {}
+        }
+      },
+      "dependencies": {
+        "shared-cart-state:lint": []
+      }
+    },
+    "shared-cart-state:test": {
+      "roots": ["shared-cart-state:test"],
+      "tasks": {
+        "shared-cart-state:test": {
+          "id": "shared-cart-state:test",
+          "target": {
+            "project": "shared-cart-state",
+            "target": "test"
+          },
+          "projectRoot": "libs/shared/cart/state",
+          "overrides": {}
+        }
+      },
+      "dependencies": {
+        "shared-cart-state:test": []
+      }
+    },
+    "shared-product-ui:lint": {
+      "roots": ["shared-product-ui:lint"],
+      "tasks": {
+        "shared-product-ui:lint": {
+          "id": "shared-product-ui:lint",
+          "target": {
+            "project": "shared-product-ui",
+            "target": "lint"
+          },
+          "projectRoot": "libs/shared/product/ui",
+          "overrides": {}
+        }
+      },
+      "dependencies": {
+        "shared-product-ui:lint": []
+      }
+    },
+    "shared-product-ui:test": {
+      "roots": ["shared-product-ui:test"],
+      "tasks": {
+        "shared-product-ui:test": {
+          "id": "shared-product-ui:test",
+          "target": {
+            "project": "shared-product-ui",
+            "target": "test"
+          },
+          "projectRoot": "libs/shared/product/ui",
+          "overrides": {}
+        }
+      },
+      "dependencies": {
+        "shared-product-ui:test": []
+      }
+    },
+    "shared-e2e-utils:lint": {
+      "roots": ["shared-e2e-utils:lint"],
+      "tasks": {
+        "shared-e2e-utils:lint": {
+          "id": "shared-e2e-utils:lint",
+          "target": {
+            "project": "shared-e2e-utils",
+            "target": "lint"
+          },
+          "projectRoot": "libs/shared/e2e-utils",
+          "overrides": {}
+        }
+      },
+      "dependencies": {
+        "shared-e2e-utils:lint": []
+      }
+    },
+    "cart-cart-page:lint": {
+      "roots": ["cart-cart-page:lint"],
+      "tasks": {
+        "cart-cart-page:lint": {
+          "id": "cart-cart-page:lint",
+          "target": {
+            "project": "cart-cart-page",
+            "target": "lint"
+          },
+          "projectRoot": "libs/cart/cart-page",
+          "overrides": {}
+        }
+      },
+      "dependencies": {
+        "cart-cart-page:lint": []
+      }
+    },
+    "cart-cart-page:test": {
+      "roots": ["cart-cart-page:test"],
+      "tasks": {
+        "cart-cart-page:test": {
+          "id": "cart-cart-page:test",
+          "target": {
+            "project": "cart-cart-page",
+            "target": "test"
+          },
+          "projectRoot": "libs/cart/cart-page",
+          "overrides": {}
+        }
+      },
+      "dependencies": {
+        "cart-cart-page:test": []
+      }
+    },
+    "shared-header:lint": {
+      "roots": ["shared-header:lint"],
+      "tasks": {
+        "shared-header:lint": {
+          "id": "shared-header:lint",
+          "target": {
+            "project": "shared-header",
+            "target": "lint"
+          },
+          "projectRoot": "libs/shared/header",
+          "overrides": {}
+        }
+      },
+      "dependencies": {
+        "shared-header:lint": []
+      }
+    },
+    "shared-header:test": {
+      "roots": ["shared-header:test"],
+      "tasks": {
+        "shared-header:test": {
+          "id": "shared-header:test",
+          "target": {
+            "project": "shared-header",
+            "target": "test"
+          },
+          "projectRoot": "libs/shared/header",
+          "overrides": {}
+        }
+      },
+      "dependencies": {
+        "shared-header:test": []
+      }
+    },
+    "shared-jsxify:lint": {
+      "roots": ["shared-jsxify:lint"],
+      "tasks": {
+        "shared-jsxify:lint": {
+          "id": "shared-jsxify:lint",
+          "target": {
+            "project": "shared-jsxify",
+            "target": "lint"
+          },
+          "projectRoot": "libs/shared/jsxify",
+          "overrides": {}
+        }
+      },
+      "dependencies": {
+        "shared-jsxify:lint": []
+      }
+    },
+    "products-e2e:e2e": {
+      "roots": ["products-e2e:e2e"],
+      "tasks": {
+        "products-e2e:e2e": {
+          "id": "products-e2e:e2e",
+          "target": {
+            "project": "products-e2e",
+            "target": "e2e"
+          },
+          "projectRoot": "apps/products-e2e",
+          "overrides": {}
+        }
+      },
+      "dependencies": {
+        "products-e2e:e2e": []
+      }
+    },
+    "products-e2e:e2e:production": {
+      "roots": ["products-e2e:e2e:production"],
+      "tasks": {
+        "products-e2e:e2e:production": {
+          "id": "products-e2e:e2e:production",
+          "target": {
+            "project": "products-e2e",
+            "target": "e2e",
+            "configuration": "production"
+          },
+          "projectRoot": "apps/products-e2e",
+          "overrides": {}
+        }
+      },
+      "dependencies": {
+        "products-e2e:e2e:production": []
+      }
+    },
+    "products-e2e:lint": {
+      "roots": ["products-e2e:lint"],
+      "tasks": {
+        "products-e2e:lint": {
+          "id": "products-e2e:lint",
+          "target": {
+            "project": "products-e2e",
+            "target": "lint"
+          },
+          "projectRoot": "apps/products-e2e",
+          "overrides": {}
+        }
+      },
+      "dependencies": {
+        "products-e2e:lint": []
+      }
+    },
+    "cart-e2e:e2e": {
+      "roots": ["cart-e2e:e2e"],
+      "tasks": {
+        "cart-e2e:e2e": {
+          "id": "cart-e2e:e2e",
+          "target": {
+            "project": "cart-e2e",
+            "target": "e2e"
+          },
+          "projectRoot": "apps/cart-e2e",
+          "overrides": {}
+        }
+      },
+      "dependencies": {
+        "cart-e2e:e2e": []
+      }
+    },
+    "cart-e2e:e2e:production": {
+      "roots": ["cart-e2e:e2e:production"],
+      "tasks": {
+        "cart-e2e:e2e:production": {
+          "id": "cart-e2e:e2e:production",
+          "target": {
+            "project": "cart-e2e",
+            "target": "e2e",
+            "configuration": "production"
+          },
+          "projectRoot": "apps/cart-e2e",
+          "overrides": {}
+        }
+      },
+      "dependencies": {
+        "cart-e2e:e2e:production": []
+      }
+    },
+    "cart-e2e:lint": {
+      "roots": ["cart-e2e:lint"],
+      "tasks": {
+        "cart-e2e:lint": {
+          "id": "cart-e2e:lint",
+          "target": {
+            "project": "cart-e2e",
+            "target": "lint"
+          },
+          "projectRoot": "apps/cart-e2e",
+          "overrides": {}
+        }
+      },
+      "dependencies": {
+        "cart-e2e:lint": []
+      }
+    },
+    "products:build": {
+      "roots": ["products:build"],
+      "tasks": {
+        "products:build": {
+          "id": "products:build",
+          "target": {
+            "project": "products",
+            "target": "build"
+          },
+          "projectRoot": "apps/products",
+          "overrides": {}
+        }
+      },
+      "dependencies": {
+        "products:build": []
+      }
+    },
+    "products:build:production": {
+      "roots": ["products:build:production"],
+      "tasks": {
+        "products:build:production": {
+          "id": "products:build:production",
+          "target": {
+            "project": "products",
+            "target": "build",
+            "configuration": "production"
+          },
+          "projectRoot": "apps/products",
+          "overrides": {}
+        }
+      },
+      "dependencies": {
+        "products:build:production": []
+      }
+    },
+    "products:serve": {
+      "roots": ["products:serve"],
+      "tasks": {
+        "products:serve": {
+          "id": "products:serve",
+          "target": {
+            "project": "products",
+            "target": "serve"
+          },
+          "projectRoot": "apps/products",
+          "overrides": {}
+        }
+      },
+      "dependencies": {
+        "products:serve": []
+      }
+    },
+    "products:serve:production": {
+      "roots": ["products:serve:production"],
+      "tasks": {
+        "products:serve:production": {
+          "id": "products:serve:production",
+          "target": {
+            "project": "products",
+            "target": "serve",
+            "configuration": "production"
+          },
+          "projectRoot": "apps/products",
+          "overrides": {}
+        }
+      },
+      "dependencies": {
+        "products:serve:production": []
+      }
+    },
+    "products:extract-i18n": {
+      "roots": ["products:extract-i18n"],
+      "tasks": {
+        "products:extract-i18n": {
+          "id": "products:extract-i18n",
+          "target": {
+            "project": "products",
+            "target": "extract-i18n"
+          },
+          "projectRoot": "apps/products",
+          "overrides": {}
+        }
+      },
+      "dependencies": {
+        "products:extract-i18n": []
+      }
+    },
+    "products:lint": {
+      "roots": ["products:lint"],
+      "tasks": {
+        "products:lint": {
+          "id": "products:lint",
+          "target": {
+            "project": "products",
+            "target": "lint"
+          },
+          "projectRoot": "apps/products",
+          "overrides": {}
+        }
+      },
+      "dependencies": {
+        "products:lint": []
+      }
+    },
+    "products:test": {
+      "roots": ["products:test"],
+      "tasks": {
+        "products:test": {
+          "id": "products:test",
+          "target": {
+            "project": "products",
+            "target": "test"
+          },
+          "projectRoot": "apps/products",
+          "overrides": {}
+        }
+      },
+      "dependencies": {
+        "products:test": []
+      }
+    },
+    "products:deploy": {
+      "roots": ["products:deploy"],
+      "tasks": {
+        "products:deploy": {
+          "id": "products:deploy",
+          "target": {
+            "project": "products",
+            "target": "deploy"
+          },
+          "projectRoot": "apps/products",
+          "overrides": {}
+        }
+      },
+      "dependencies": {
+        "products:deploy": []
+      }
+    },
+    "new-lib:test": {
+      "roots": ["new-lib:test"],
+      "tasks": {
+        "new-lib:test": {
+          "id": "new-lib:test",
+          "target": {
+            "project": "new-lib",
+            "target": "test"
+          },
+          "projectRoot": "libs/new-lib",
+          "overrides": {}
+        }
+      },
+      "dependencies": {
+        "new-lib:test": []
+      }
+    },
+    "new-lib:lint": {
+      "roots": ["new-lib:lint"],
+      "tasks": {
+        "new-lib:lint": {
+          "id": "new-lib:lint",
+          "target": {
+            "project": "new-lib",
+            "target": "lint"
+          },
+          "projectRoot": "libs/new-lib",
+          "overrides": {}
+        }
+      },
+      "dependencies": {
+        "new-lib:lint": []
+      }
+    },
+    "cart:build": {
+      "roots": ["cart:build:production"],
+      "tasks": {
+        "cart:build:production": {
+          "id": "cart:build:production",
+          "target": {
+            "project": "cart",
+            "target": "build",
+            "configuration": "production"
+          },
+          "projectRoot": "apps/cart",
+          "overrides": {}
+        }
+      },
+      "dependencies": {
+        "cart:build:production": []
+      }
+    },
+    "cart:build:production": {
+      "roots": ["cart:build:production"],
+      "tasks": {
+        "cart:build:production": {
+          "id": "cart:build:production",
+          "target": {
+            "project": "cart",
+            "target": "build",
+            "configuration": "production"
+          },
+          "projectRoot": "apps/cart",
+          "overrides": {}
+        }
+      },
+      "dependencies": {
+        "cart:build:production": []
+      }
+    },
+    "cart:build:development": {
+      "roots": ["cart:build:development"],
+      "tasks": {
+        "cart:build:development": {
+          "id": "cart:build:development",
+          "target": {
+            "project": "cart",
+            "target": "build",
+            "configuration": "development"
+          },
+          "projectRoot": "apps/cart",
+          "overrides": {}
+        }
+      },
+      "dependencies": {
+        "cart:build:development": []
+      }
+    },
+    "cart:serve": {
+      "roots": ["cart:serve:development"],
+      "tasks": {
+        "cart:serve:development": {
+          "id": "cart:serve:development",
+          "target": {
+            "project": "cart",
+            "target": "serve",
+            "configuration": "development"
+          },
+          "projectRoot": "apps/cart",
+          "overrides": {}
+        }
+      },
+      "dependencies": {
+        "cart:serve:development": []
+      }
+    },
+    "cart:serve:production": {
+      "roots": ["cart:serve:production"],
+      "tasks": {
+        "cart:serve:production": {
+          "id": "cart:serve:production",
+          "target": {
+            "project": "cart",
+            "target": "serve",
+            "configuration": "production"
+          },
+          "projectRoot": "apps/cart",
+          "overrides": {}
+        }
+      },
+      "dependencies": {
+        "cart:serve:production": []
+      }
+    },
+    "cart:serve:development": {
+      "roots": ["cart:serve:development"],
+      "tasks": {
+        "cart:serve:development": {
+          "id": "cart:serve:development",
+          "target": {
+            "project": "cart",
+            "target": "serve",
+            "configuration": "development"
+          },
+          "projectRoot": "apps/cart",
+          "overrides": {}
+        }
+      },
+      "dependencies": {
+        "cart:serve:development": []
+      }
+    },
+    "cart:lint": {
+      "roots": ["cart:lint"],
+      "tasks": {
+        "cart:lint": {
+          "id": "cart:lint",
+          "target": {
+            "project": "cart",
+            "target": "lint"
+          },
+          "projectRoot": "apps/cart",
+          "overrides": {}
+        }
+      },
+      "dependencies": {
+        "cart:lint": []
+      }
+    },
+    "cart:test": {
+      "roots": ["cart:test"],
+      "tasks": {
+        "cart:test": {
+          "id": "cart:test",
+          "target": {
+            "project": "cart",
+            "target": "test"
+          },
+          "projectRoot": "apps/cart",
+          "overrides": {}
+        }
+      },
+      "dependencies": {
+        "cart:test": []
+      }
+    },
+    "cart:deploy": {
+      "roots": ["cart:deploy"],
+      "tasks": {
+        "cart:deploy": {
+          "id": "cart:deploy",
+          "target": {
+            "project": "cart",
+            "target": "deploy"
+          },
+          "projectRoot": "apps/cart",
+          "overrides": {}
+        }
+      },
+      "dependencies": {
+        "cart:deploy": []
+      }
+    }
+  }
+}

scripts/generate-graph-environment.ts

@@ -48,7 +48,8 @@ function writeFile() {
       return {
         id,
         label: id,
-        url: join('assets/project-graphs/', filename),
+        projectGraphUrl: join('assets/project-graphs/', filename),
+        taskGraphUrl: join('assets/task-graphs/', filename),
       };
     });
   } catch {