feat(core): refactor graph implementation details

graph/client/src/app/app.tsx

@@ -1,4 +1,4 @@
-import { themeInit } from '@nx/graph/ui-theme';
+import { themeInit } from '@nx/graph-internal/ui-theme';
 import { rankDirInit } from './rankdir-resolver';
 import { RouterProvider } from 'react-router-dom';
 import { getRouter } from './get-router';

graph/client/src/app/feature-projects/machines/composite-graph.state.ts

@@ -0,0 +1,155 @@
+import { ProjectGraphStateNodeConfig } from './interfaces';
+import { assign } from '@xstate/immer';
+import { send } from 'xstate';
+
+export const compositeGraphStateConfig: ProjectGraphStateNodeConfig = {
+  entry: [
+    assign((ctx, event) => {
+      if (event.type !== 'enableCompositeGraph') return;
+      ctx.compositeGraph.enabled = true;
+      ctx.compositeGraph.context = event.context || undefined;
+    }),
+    send(
+      (ctx) => ({
+        type: 'notifyGraphUpdateGraph',
+        projects: ctx.projects,
+        dependencies: ctx.dependencies,
+        fileMap: ctx.fileMap,
+        affectedProjects: ctx.affectedProjects,
+        workspaceLayout: ctx.workspaceLayout,
+        groupByFolder: ctx.groupByFolder,
+        selectedProjects: ctx.selectedProjects,
+        composite: ctx.compositeGraph,
+      }),
+      { to: (ctx) => ctx.graphActor }
+    ),
+  ],
+  exit: [
+    send(() => ({ type: 'notifyGraphDisableCompositeGraph' }), {
+      to: (ctx) => ctx.graphActor,
+    }),
+    assign((ctx) => {
+      ctx.compositeGraph.enabled = false;
+      ctx.compositeGraph.context = undefined;
+    }),
+  ],
+  on: {
+    focusProject: {
+      actions: [
+        assign((ctx, event) => {
+          if (event.type !== 'focusProject') return;
+          ctx.focusedProject = event.projectName;
+        }),
+        send(
+          (context, event) => ({
+            type: 'notifyGraphFocusProject',
+            projectName: context.focusedProject,
+            searchDepth: context.searchDepthEnabled ? context.searchDepth : -1,
+          }),
+          { to: (context) => context.graphActor }
+        ),
+      ],
+    },
+    unfocusProject: {
+      actions: [
+        assign((ctx, event) => {
+          if (event.type !== 'unfocusProject') return;
+          ctx.focusedProject = null;
+        }),
+        send((ctx) => ({
+          type: 'enableCompositeGraph',
+          context: ctx.compositeGraph.context,
+        })),
+      ],
+    },
+    deselectProject: {
+      actions: [
+        send(
+          (ctx, event) => ({
+            type: 'notifyGraphHideProjects',
+            projectNames: [event.projectName],
+          }),
+          { to: (ctx) => ctx.graphActor }
+        ),
+      ],
+    },
+    selectProject: {
+      actions: [
+        send(
+          (ctx, event) => ({
+            type: 'notifyGraphShowProjects',
+            projectNames: [event.projectName],
+          }),
+          { to: (ctx) => ctx.graphActor }
+        ),
+      ],
+    },
+    expandCompositeNode: {
+      actions: [
+        send(
+          (ctx, event) => ({
+            type: 'notifyGraphExpandCompositeNode',
+            id: event.id,
+          }),
+          { to: (ctx) => ctx.graphActor }
+        ),
+      ],
+    },
+    collapseCompositeNode: {
+      actions: [
+        send(
+          (ctx, event) => ({
+            type: 'notifyGraphCollapseCompositeNode',
+            id: event.id,
+          }),
+          { to: (ctx) => ctx.graphActor }
+        ),
+      ],
+    },
+    enableCompositeGraph: {
+      actions: [
+        assign((ctx, event) => {
+          if (event.type !== 'enableCompositeGraph') return;
+          ctx.compositeGraph.enabled = true;
+          ctx.compositeGraph.context = event.context || undefined;
+        }),
+        send(
+          (ctx, event) => ({
+            type: 'notifyGraphUpdateGraph',
+            projects: ctx.projects,
+            dependencies: ctx.dependencies,
+            fileMap: ctx.fileMap,
+            affectedProjects: ctx.affectedProjects,
+            workspaceLayout: ctx.workspaceLayout,
+            groupByFolder: ctx.groupByFolder,
+            selectedProjects: ctx.selectedProjects,
+            composite: ctx.compositeGraph,
+          }),
+          { to: (ctx) => ctx.graphActor }
+        ),
+      ],
+    },
+    disableCompositeGraph: {
+      target: 'unselected',
+    },
+    updateGraph: {
+      actions: [
+        'setGraph',
+        send(
+          (ctx, event) => ({
+            type: 'notifyGraphUpdateGraph',
+            projects: ctx.projects,
+            dependencies: ctx.dependencies,
+            fileMap: ctx.fileMap,
+            affectedProjects: ctx.affectedProjects,
+            workspaceLayout: ctx.workspaceLayout,
+            groupByFolder: ctx.groupByFolder,
+            selectedProjects: ctx.selectedProjects,
+            composite: ctx.compositeGraph,
+          }),
+          { to: (ctx) => ctx.graphActor }
+        ),
+      ],
+    },
+  },
+};

graph/client/src/app/feature-projects/machines/custom-selected.state.ts

@@ -31,6 +31,7 @@ export const customSelectedStateConfig: ProjectGraphStateNodeConfig = {
             workspaceLayout: ctx.workspaceLayout,
             groupByFolder: ctx.groupByFolder,
             selectedProjects: ctx.selectedProjects,
+            composite: ctx.compositeGraph,
           }),
           {
             to: (context) => context.graphActor,

graph/client/src/app/feature-projects/machines/focused.state.ts

@@ -45,6 +45,7 @@ export const focusedStateConfig: ProjectGraphStateNodeConfig = {
             workspaceLayout: ctx.workspaceLayout,
             groupByFolder: ctx.groupByFolder,
             selectedProjects: ctx.selectedProjects,
+            composite: ctx.compositeGraph,
           }),
           {
             to: (context) => context.graphActor,

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

@@ -4,12 +4,13 @@ export const graphActor = (callback, receive) => {
   const graphService = getGraphService();
 
   receive((e) => {
-    const { selectedProjectNames, perfReport } =
+    const { selectedProjectNames, perfReport, compositeNodes } =
       graphService.handleProjectEvent(e);
     callback({
       type: 'setSelectedProjectsFromGraph',
       selectedProjectNames,
       perfReport,
+      compositeNodes,
     });
   });
 };

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

@@ -1,4 +1,4 @@
-import { GraphPerfReport } from '../../interfaces';
+import { CompositeNode, GraphPerfReport } from '../../interfaces';
 /* eslint-disable @nx/enforce-module-boundaries */
 // nx-ignore-next-line
 import {
@@ -30,6 +30,7 @@ export type ProjectGraphMachineEvents =
       type: 'setSelectedProjectsFromGraph';
       selectedProjectNames: string[];
       perfReport: GraphPerfReport;
+      compositeNodes: Array<CompositeNode>;
     }
   | { type: 'selectProject'; projectName: string }
   | { type: 'deselectProject'; projectName: string }
@@ -70,7 +71,12 @@ export type ProjectGraphMachineEvents =
       projects: ProjectGraphProjectNode[];
       dependencies: Record<string, ProjectGraphDependency[]>;
       fileMap: ProjectFileMap;
-    };
+    }
+  | { type: 'enableCompositeGraph'; context: string | null }
+  | { type: 'setCompositeContext'; context: string | null }
+  | { type: 'expandCompositeNode'; id: string }
+  | { type: 'collapseCompositeNode'; id: string }
+  | { type: 'disableCompositeGraph' };
 
 // The context (extended state) of the machine
 export interface ProjectGraphContext {
@@ -97,6 +103,7 @@ export interface ProjectGraphContext {
     end: string;
     algorithm: TracingAlgorithmType;
   };
+  compositeGraph: CompositeGraph;
 }
 
 export type ProjectGraphStateNodeConfig = StateNodeConfig<
@@ -115,3 +122,9 @@ export type ProjectGraphState = State<
     context: ProjectGraphContext;
   }
 >;
+
+export interface CompositeGraph {
+  enabled: boolean;
+  context?: string;
+  nodes: CompositeNode[];
+}

graph/client/src/app/feature-projects/machines/project-graph.machine.ts

@@ -7,6 +7,7 @@ import { textFilteredStateConfig } from './text-filtered.state';
 import { tracingStateConfig } from './tracing.state';
 import { unselectedStateConfig } from './unselected.state';
 import { ProjectGraphContext, ProjectGraphMachineEvents } from './interfaces';
+import { compositeGraphStateConfig } from './composite-graph.state';
 
 export const initialContext: ProjectGraphContext = {
   projects: [],
@@ -36,6 +37,10 @@ export const initialContext: ProjectGraphContext = {
     end: null,
     algorithm: 'shortest',
   },
+  compositeGraph: {
+    enabled: false,
+    nodes: [],
+  },
 };
 
 export const projectGraphMachine = createMachine<
@@ -54,6 +59,7 @@ export const projectGraphMachine = createMachine<
       focused: focusedStateConfig,
       textFiltered: textFilteredStateConfig,
       tracing: tracingStateConfig,
+      composite: compositeGraphStateConfig,
     },
     on: {
       setProjects: {
@@ -70,6 +76,7 @@ export const projectGraphMachine = createMachine<
               workspaceLayout: ctx.workspaceLayout,
               groupByFolder: ctx.groupByFolder,
               collapseEdges: ctx.collapseEdges,
+              composite: ctx.compositeGraph.enabled,
             }),
             {
               to: (context) => context.graphActor,
@@ -82,6 +89,7 @@ export const projectGraphMachine = createMachine<
           assign((ctx, event) => {
             ctx.selectedProjects = event.selectedProjectNames;
             ctx.lastPerfReport = event.perfReport;
+            ctx.compositeGraph.nodes = event.compositeNodes;
           }),
         ],
       },
@@ -147,6 +155,7 @@ export const projectGraphMachine = createMachine<
               groupByFolder: ctx.groupByFolder,
               collapseEdges: ctx.collapseEdges,
               selectedProjects: ctx.selectedProjects,
+              composite: ctx.compositeGraph,
             }),
             {
               to: (context) => context.graphActor,
@@ -168,6 +177,7 @@ export const projectGraphMachine = createMachine<
               groupByFolder: ctx.groupByFolder,
               collapseEdges: ctx.collapseEdges,
               selectedProjects: ctx.selectedProjects,
+              composite: ctx.compositeGraph,
             }),
             {
               to: (context) => context.graphActor,
@@ -205,13 +215,19 @@ export const projectGraphMachine = createMachine<
       filterByText: {
         target: 'textFiltered',
       },
+      enableCompositeGraph: {
+        target: 'composite',
+      },
     },
   },
   {
     guards: {
       deselectLastProject: (ctx) => {
         return ctx.selectedProjects.length <= 1;
       },
+      isCompositeGraphEnabled: (ctx) => {
+        return ctx.compositeGraph.enabled;
+      },
     },
     actions: {
       setGroupByFolder: assign((ctx, event) => {
@@ -356,7 +372,6 @@ export const projectGraphMachine = createMachine<
           to: (context) => context.graphActor,
         }
       ),
-
       notifyGraphFilterProjectsByText: send(
         (context, event) => ({
           type: 'notifyGraphFilterProjectsByText',

graph/client/src/app/feature-projects/machines/project-graph.spec.ts

@@ -106,6 +106,8 @@ const mockAppConfig: AppConfig = {
       label: 'local',
       projectGraphUrl: 'assets/project-graphs/e2e.json',
       taskGraphUrl: 'assets/task-graphs/e2e.json',
+      taskInputsUrl: '',
+      sourceMapsUrl: '',
     },
   ],
   defaultWorkspaceId: 'local',

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

@@ -3,7 +3,11 @@
 import type { ProjectGraphProjectNode } from '@nx/devkit';
 /* eslint-enable @nx/enforce-module-boundaries */
 import { ProjectGraphSelector } from '../hooks/use-project-graph-selector';
-import { GraphPerfReport, WorkspaceLayout } from '../../interfaces';
+import {
+  CompositeNode,
+  GraphPerfReport,
+  WorkspaceLayout,
+} from '../../interfaces';
 import { TracingAlgorithmType } from './interfaces';
 
 export const allProjectsSelector: ProjectGraphSelector<
@@ -46,6 +50,15 @@ export const groupByFolderSelector: ProjectGraphSelector<boolean> = (state) =>
 
 export const collapseEdgesSelector: ProjectGraphSelector<boolean> = (state) =>
   state.context.collapseEdges;
+export const compositeGraphEnabledSelector: ProjectGraphSelector<boolean> = (
+  state
+) => state.context.compositeGraph.enabled;
+export const compositeContextSelector: ProjectGraphSelector<string | null> = (
+  state
+) => state.context.compositeGraph.context;
+export const compositeNodesSelector: ProjectGraphSelector<CompositeNode[]> = (
+  state
+) => state.context.compositeGraph.nodes;
 
 export const textFilterSelector: ProjectGraphSelector<string> = (state) =>
   state.context.textFilter;

graph/client/src/app/feature-projects/machines/text-filtered.state.ts

@@ -44,6 +44,7 @@ export const textFilteredStateConfig: ProjectGraphStateNodeConfig = {
             workspaceLayout: ctx.workspaceLayout,
             groupByFolder: ctx.groupByFolder,
             selectedProjects: ctx.selectedProjects,
+            composite: ctx.compositeGraph,
           }),
           {
             to: (context) => context.graphActor,

graph/client/src/app/feature-projects/machines/unselected.state.ts

@@ -33,6 +33,7 @@ export const unselectedStateConfig: ProjectGraphStateNodeConfig = {
             workspaceLayout: ctx.workspaceLayout,
             groupByFolder: ctx.groupByFolder,
             selectedProjects: ctx.selectedProjects,
+            composite: ctx.compositeGraph,
           }),
           {
             to: (context) => context.graphActor,