feat(graph): task graph support multiple targets (#32418)

- [x] graph-client supports multiple targets with multiselect and query
params `?targets`
- [x] `nx graph` supports multiple targets (i.e: `nx run-many -t
build,test --graph`

<img width="277" height="385" alt="image"
src="https://github.com/user-attachments/assets/6869b652-2ecb-4afb-9ae5-ec29628afec1"
/>

(cherry picked from commit a277074)

Author: nartc

graph/client-e2e/src/fixtures/nx-examples-task-graphs.json

@@ -43,7 +43,7 @@
       "defaultConfiguration": "release"
     },
     "typecheck": {
-      "dependsOn": ["^typecheck", "build-native"]
+      "dependsOn": ["^typecheck"]
     },
     "serve-base": {
       "configurations": {

graph/client/project.json

@@ -1,6 +1,6 @@
 /* eslint-disable @nx/enforce-module-boundaries */
-// nx-ignore-next-line
 import { assign } from '@xstate/immer';
+// nx-ignore-next-line
 import type {
   GeneratedMigrationDetails,
   MigrationDetailsWithId,

graph/client/src/app/console-migrate/migrate.machine.ts

@@ -8,22 +8,14 @@ import type {
 } from '@nx/devkit';
 /* eslint-enable @nx/enforce-module-boundaries */
 import {
-  InitGraphEvent,
   ProjectGraphClient,
   ProjectGraphClientScratchData,
-  ProjectGraphClientScratchPad,
   ProjectGraphEvent,
   ProjectGraphHandleEventResult,
   ProjectGraphRenderScratchData,
-  UpdateGraphEvent,
 } from '@nx/graph/projects';
 import { ActionObject, ActorRef, State, StateNodeConfig } from 'xstate';
-import { GraphRenderEvents } from '../../machines/interfaces';
-import {
-  CompositeProjectNodeElementData,
-  RenderGraphConfigEvent,
-  RenderGraphScratchData,
-} from '@nx/graph';
+import { RenderGraphConfigEvent, RenderGraphScratchData } from '@nx/graph';
 
 // The hierarchical schema for the states
 export interface ProjectGraphSchema {

graph/client/src/app/feature-projects/machines/interfaces.ts

@@ -9,10 +9,6 @@ import {
   WorkspaceLayout,
 } from '../../interfaces';
 import { TracingAlgorithmType } from './interfaces';
-import {
-  CompositeProjectEdgeElementData,
-  CompositeProjectNodeElementData,
-} from '@nx/graph';
 
 export const allProjectsSelector: ProjectGraphSelector<
   ProjectGraphProjectNode[]

graph/client/src/app/feature-projects/machines/selectors.ts

@@ -2,11 +2,7 @@
 // nx-ignore-next-line
 import type { ProjectGraphProjectNode } from '@nx/devkit';
 /* eslint-enable @nx/enforce-module-boundaries */
-import {
-  createTaskName,
-  getProjectsByType,
-  groupProjectsByDirectory,
-} from '../util';
+import { getProjectsByType, groupProjectsByDirectory } from '../util';
 import { WorkspaceLayout } from '../interfaces';
 import { ExclamationCircleIcon, EyeIcon } from '@heroicons/react/24/outline';
 import { ReactNode } from 'react';
@@ -109,40 +105,45 @@ function SubProjectList({
 function mapToSidebarProjectWithTasks(
   project: ProjectGraphProjectNode,
   selectedProjects: string[],
-  selectedTarget: string,
-  errors: Record<string, string>
+  selectedTargets: string[],
+  error: string | null
 ): SidebarProject {
-  const taskId = createTaskName(project.name, selectedTarget);
+  // If there's a global error, show it for the project
+  const hasError = error !== null;
 
   return {
     projectGraphNode: project,
     isSelected: selectedProjects.includes(project.name),
-    error: errors?.[taskId] ?? null,
+    error: hasError ? error : null,
   };
 }
 
 export interface TaskListProps {
   projects: ProjectGraphProjectNode[];
   workspaceLayout: WorkspaceLayout;
-  selectedTarget: string;
+  selectedTargets: string[];
   selectedProjects: string[];
   toggleProject: (projectName: string) => void;
   children: ReactNode | ReactNode[];
-  errors: Record<string, string>;
+  error: string | null;
 }
 
 export function TaskList({
   projects,
   workspaceLayout,
-  selectedTarget,
+  selectedTargets,
   selectedProjects,
   toggleProject,
   children,
-  errors,
+  error,
 }: TaskListProps) {
   const filteredProjects = projects
-    .filter((project) =>
-      (project.data as any).targets?.hasOwnProperty(selectedTarget)
+    .filter(
+      (project) =>
+        selectedTargets.length > 0 &&
+        selectedTargets.some((target) =>
+          (project.data as any).targets?.hasOwnProperty(target)
+        )
     )
     .sort((a, b) => a.name.localeCompare(b.name));
   const appProjects = getProjectsByType('app', filteredProjects);
@@ -182,8 +183,8 @@ export function TaskList({
               mapToSidebarProjectWithTasks(
                 project,
                 selectedProjects,
-                selectedTarget,
-                errors
+                selectedTargets,
+                error
               )
             )}
             toggleTask={toggleProject}
@@ -204,8 +205,8 @@ export function TaskList({
               mapToSidebarProjectWithTasks(
                 project,
                 selectedProjects,
-                selectedTarget,
-                errors
+                selectedTargets,
+                error
               )
             )}
             toggleTask={toggleProject}
@@ -226,8 +227,8 @@ export function TaskList({
               mapToSidebarProjectWithTasks(
                 project,
                 selectedProjects,
-                selectedTarget,
-                errors
+                selectedTargets,
+                error
               )
             )}
             toggleTask={toggleProject}