feat(graph): expose functions to render pdv & error page (#27833)

we have fully isolated graph & error components with a good api but no
way to access them directly from the outside (in console).

This PR adds two functions to the window object so that we can render
the PDV directly instead of needing the entire app with routing and
everything.

---------

Co-authored-by: Jack Hsu <jack.hsu@gmail.com>

graph/client/src/app/console-project-details/project-details.app.tsx

@@ -0,0 +1,94 @@
+import { useCallback } from 'react';
+import {
+  ErrorToastUI,
+  ExpandedTargetsProvider,
+  getExternalApiService,
+} from '@nx/graph/shared';
+import { useMachine, useSelector } from '@xstate/react';
+import { ProjectDetails } from '@nx/graph-internal/ui-project-details';
+import {
+  ProjectDetailsEvents,
+  ProjectDetailsState,
+} from './project-details.machine';
+import { Interpreter } from 'xstate';
+
+export function ProjectDetailsApp({
+  service,
+}: {
+  service: Interpreter<ProjectDetailsState, any, ProjectDetailsEvents>;
+}) {
+  const externalApiService = getExternalApiService();
+
+  const project = useSelector(service, (state) => state.context.project);
+  const sourceMap = useSelector(service, (state) => state.context.sourceMap);
+  const errors = useSelector(service, (state) => state.context.errors);
+  const connectedToCloud = useSelector(
+    service,
+    (state) => state.context.connectedToCloud
+  );
+
+  const handleViewInProjectGraph = useCallback(
+    (data: { projectName: string }) => {
+      externalApiService.postEvent({
+        type: 'open-project-graph',
+        payload: {
+          projectName: data.projectName,
+        },
+      });
+    },
+    [externalApiService]
+  );
+
+  const handleViewInTaskGraph = useCallback(
+    (data: { projectName: string; targetName: string }) => {
+      externalApiService.postEvent({
+        type: 'open-task-graph',
+        payload: {
+          projectName: data.projectName,
+          targetName: data.targetName,
+        },
+      });
+    },
+    [externalApiService]
+  );
+
+  const handleRunTarget = useCallback(
+    (data: { projectName: string; targetName: string }) => {
+      externalApiService.postEvent({
+        type: 'run-task',
+        payload: { taskId: `${data.projectName}:${data.targetName}` },
+      });
+    },
+    [externalApiService]
+  );
+
+  const handleNxConnect = useCallback(
+    () =>
+      externalApiService.postEvent({
+        type: 'nx-connect',
+      }),
+    [externalApiService]
+  );
+
+  if (project && sourceMap) {
+    return (
+      <>
+        <ExpandedTargetsProvider>
+          <ProjectDetails
+            project={project}
+            sourceMap={sourceMap}
+            onViewInProjectGraph={handleViewInProjectGraph}
+            onViewInTaskGraph={handleViewInTaskGraph}
+            onRunTarget={handleRunTarget}
+            viewInProjectGraphPosition="bottom"
+            connectedToCloud={connectedToCloud}
+            onNxConnect={handleNxConnect}
+          />
+        </ExpandedTargetsProvider>
+        <ErrorToastUI errors={errors} />
+      </>
+    );
+  } else {
+    return null;
+  }
+}

graph/client/src/app/console-project-details/project-details.machine.spec.ts

@@ -0,0 +1,49 @@
+import { interpret } from 'xstate';
+import { projectDetailsMachine } from './project-details.machine';
+
+describe('graphMachine', () => {
+  let service;
+
+  beforeEach(() => {
+    service = interpret(projectDetailsMachine).start();
+  });
+
+  afterEach(() => {
+    service.stop();
+  });
+
+  it('should have initial idle state', () => {
+    expect(service.state.value).toEqual('idle');
+    expect(service.state.context.project).toEqual(null);
+    expect(service.state.context.errors).toBeUndefined();
+  });
+
+  it('should handle setting data', () => {
+    service.send({
+      type: 'loadData',
+      project: {
+        type: 'app',
+        name: 'proj',
+        data: {},
+      },
+      sourceMap: {
+        root: ['project.json', 'nx-core-build-project-json-nodes'],
+      },
+      errors: [{ name: 'ERROR' }],
+      connectedToCloud: true,
+    });
+
+    expect(service.state.value).toEqual('loaded');
+
+    expect(service.state.context.project).toEqual({
+      type: 'app',
+      name: 'proj',
+      data: {},
+    });
+    expect(service.state.context.sourceMap).toEqual({
+      root: ['project.json', 'nx-core-build-project-json-nodes'],
+    });
+    expect(service.state.context.errors).toEqual([{ name: 'ERROR' }]);
+    expect(service.state.context.connectedToCloud).toEqual(true);
+  });
+});

graph/client/src/app/console-project-details/project-details.machine.ts

@@ -0,0 +1,58 @@
+/* eslint-disable @nx/enforce-module-boundaries */
+// nx-ignore-next-line
+import type { ProjectGraphProjectNode } from '@nx/devkit';
+// nx-ignore-next-line
+import { GraphError } from 'nx/src/command-line/graph/graph';
+/* eslint-enable @nx/enforce-module-boundaries */
+import { createMachine } from 'xstate';
+import { assign } from '@xstate/immer';
+
+export interface ProjectDetailsState {
+  project: null | ProjectGraphProjectNode;
+  sourceMap: null | Record<string, string[]>;
+  errors?: GraphError[];
+  connectedToCloud?: boolean;
+}
+
+export type ProjectDetailsEvents = {
+  type: 'loadData';
+  project: ProjectGraphProjectNode;
+  sourceMap: Record<string, string[]>;
+  connectedToCloud: boolean;
+  errors?: GraphError[];
+};
+
+const initialContext: ProjectDetailsState = {
+  project: null,
+  sourceMap: null,
+};
+
+export const projectDetailsMachine = createMachine<
+  ProjectDetailsState,
+  ProjectDetailsEvents
+>({
+  predictableActionArguments: true,
+  preserveActionOrder: true,
+  id: 'project-view',
+  initial: 'idle',
+  context: initialContext,
+  states: {
+    idle: {},
+    loaded: {},
+  },
+  on: {
+    loadData: [
+      {
+        target: 'loaded',
+        actions: [
+          assign((ctx, event) => {
+            ctx.project = event.project;
+            ctx.sourceMap = event.sourceMap;
+            ctx.connectedToCloud = event.connectedToCloud;
+            ctx.errors = event.errors;
+          }),
+        ],
+      },
+    ],
+  },
+});

graph/client/src/app/ui-components/error-boundary.tsx

@@ -5,12 +5,12 @@ import {
   useEnvironmentConfig,
   usePoll,
 } from '@nx/graph/shared';
-import { ErrorRenderer } from '@nx/graph/ui-components';
 import {
   isRouteErrorResponse,
   useParams,
   useRouteError,
 } from 'react-router-dom';
+import { ErrorPage } from './error-page';
 
 export function ErrorBoundary() {
   let error = useRouteError();
@@ -63,38 +63,11 @@ export function ErrorBoundary() {
   return (
     <div className="flex h-screen w-full flex-col items-center">
       {environment !== 'nx-console' && <ProjectDetailsHeader />}
-      <div className="mx-auto mb-8 w-full max-w-6xl flex-grow px-8">
+      <ErrorPage
-        <h1 className="mb-4 text-4xl dark:text-slate-100">Error</h1>
+        message={message}
-        <div>
+        stack={stack}
-          <ErrorWithStack message={message} stack={stack} />
+        errors={hasErrorData ? error.data.errors : undefined}
-        </div>
+      />
-        {hasErrorData && (
-          <div>
-            <p className="text-md mb-4 dark:text-slate-200">
-              Nx encountered the following issues while processing the project
-              graph:{' '}
-            </p>
-            <div>
-              <ErrorRenderer errors={error.data.errors} />
-            </div>
-          </div>
-        )}
-      </div>
-    </div>
-  );
-}
-
-function ErrorWithStack({
-  message,
-  stack,
-}: {
-  message: string | JSX.Element;
-  stack?: string;
-}) {
-  return (
-    <div>
-      <p className="mb-4 text-lg dark:text-slate-100">{message}</p>
-      {stack && <p className="text-sm">Error message: {stack}</p>}
     </div>
   );
 }

graph/client/src/app/ui-components/error-page.tsx

@@ -0,0 +1,49 @@
+/* eslint-disable @nx/enforce-module-boundaries */
+// nx-ignore-next-line
+import { ErrorRenderer } from '@nx/graph/ui-components';
+import { GraphError } from 'nx/src/command-line/graph/graph';
+/* eslint-enable @nx/enforce-module-boundaries */
+import type { JSX } from 'react';
+
+export type ErrorPageProps = {
+  message: string | JSX.Element;
+  stack?: string;
+  errors: GraphError[];
+};
+
+export function ErrorPage({ message, stack, errors }: ErrorPageProps) {
+  return (
+    <div className="mx-auto mb-8 w-full max-w-6xl flex-grow px-8">
+      <h1 className="mb-4 text-4xl dark:text-slate-100">Error</h1>
+      <div>
+        <ErrorWithStack message={message} stack={stack} />
+      </div>
+      {errors && (
+        <div>
+          <p className="text-md mb-4 dark:text-slate-200">
+            Nx encountered the following issues while processing the project
+            graph:{' '}
+          </p>
+          <div>
+            <ErrorRenderer errors={errors} />
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
+
+function ErrorWithStack({
+  message,
+  stack,
+}: {
+  message: string | JSX.Element;
+  stack?: string;
+}) {
+  return (
+    <div>
+      <p className="mb-4 text-lg dark:text-slate-100">{message}</p>
+      {stack && <p className="text-sm">Error message: {stack}</p>}
+    </div>
+  );
+}

graph/client/src/globals.d.ts

@@ -6,6 +6,12 @@ import type {
   TaskGraphClientResponse,
 } from 'nx/src/command-line/graph/graph';
 import type { AppConfig, ExternalApi } from '@nx/graph/shared';
+import {
+  ProjectDetailsEvents,
+  projectDetailsMachine,
+  ProjectDetailsState,
+} from './app/console/project-details/project-details.machine';
+import { Interpreter } from 'xstate';
 
 export declare global {
   interface Window {
@@ -20,6 +26,13 @@ export declare global {
     appConfig: AppConfig;
     useXstateInspect: boolean;
     externalApi?: ExternalApi;
+
+    // using bundled graph components directly from outside the graph app
+    __NX_RENDER_GRAPH__?: boolean;
+    renderPDV?: (
+      data: any
+    ) => Interpreter<ProjectDetailsState, any, ProjectDetailsEvents>;
+    renderError?: (data: any) => void;
   }
 }
 declare module 'cytoscape' {

graph/client/src/main.tsx

@@ -4,35 +4,85 @@ if (process.env.NODE_ENV === 'development') {
   require('preact/debug');
 }
 
+import { projectDetailsMachine } from './app/console-project-details/project-details.machine';
+/* eslint-disable @nx/enforce-module-boundaries */
+// nx-ignore-next-line
+import type { ProjectGraphProjectNode } from '@nx/devkit';
+// nx-ignore-next-line
+import type { GraphError } from 'nx/src/command-line/graph/graph';
+/* eslint-enable @nx/enforce-module-boundaries */
 import { StrictMode } from 'react';
 import { inspect } from '@xstate/inspect';
 import { App } from './app/app';
 import { ExternalApiImpl } from './app/external-api-impl';
 import { render } from 'preact';
+import { ErrorPage } from './app/ui-components/error-page';
+import { ProjectDetailsApp } from './app/console-project-details/project-details.app';
+import { interpret } from 'xstate';
 
-if (window.useXstateInspect === true) {
+if (window.__NX_RENDER_GRAPH__ === false) {
-  inspect({
+  window.externalApi = new ExternalApiImpl();
-    url: 'https://stately.ai/viz?inspect',
-    iframe: false, // open in new window
-  });
-}
 
-window.externalApi = new ExternalApiImpl();
+  window.renderPDV = (data: {
-const container = document.getElementById('app');
+    project: ProjectGraphProjectNode;
+    sourceMap: Record<string, string[]>;
+    connectedToCloud: boolean;
+    errors?: GraphError[];
+  }) => {
+    const service = interpret(projectDetailsMachine).start();
 
-if (!window.appConfig) {
+    service.send({
-  render(
+      type: 'loadData',
-    <p>
+      ...data,
-      No environment could be found. Please run{' '}
+    });
-      <pre>npx nx run graph-client:generate-dev-environment-js</pre>.
+
-    </p>,
+    render(
-    container
+      <StrictMode>
-  );
+        <ProjectDetailsApp service={service} />
+      </StrictMode>,
+      document.getElementById('app')
+    );
+
+    return service;
+  };
+
+  window.renderError = (data: {
+    message: string;
+    stack?: string;
+    errors: GraphError[];
+  }) => {
+    render(
+      <StrictMode>
+        <ErrorPage {...data} />
+      </StrictMode>,
+      document.getElementById('app')
+    );
+  };
 } else {
-  render(
+  if (window.useXstateInspect === true) {
-    <StrictMode>
+    inspect({
-      <App />
+      url: 'https://stately.ai/viz?inspect',
-    </StrictMode>,
+      iframe: false, // open in new window
-    container
+    });
-  );
+  }
+
+  window.externalApi = new ExternalApiImpl();
+  const container = document.getElementById('app');
+
+  if (!window.appConfig) {
+    render(
+      <p>
+        No environment could be found. Please run{' '}
+        <pre>npx nx run graph-client:generate-dev-environment-js</pre>.
+      </p>,
+      container
+    );
+  } else {
+    render(
+      <StrictMode>
+        <App />
+      </StrictMode>,
+      container
+    );
+  }
 }

graph/ui-project-details/src/lib/project-details/project-details.tsx

@@ -90,7 +90,7 @@ export const ProjectDetails = ({
           </div>
           {onViewInProjectGraph && viewInProjectGraphPosition === 'top' && (
             <ViewInProjectGraphButton
-              callback={() =>
+              onClick={() =>
                 onViewInProjectGraph({ projectName: project.name })
               }
             />
@@ -125,7 +125,7 @@ export const ProjectDetails = ({
             {onViewInProjectGraph &&
               viewInProjectGraphPosition === 'bottom' && (
                 <ViewInProjectGraphButton
-                  callback={() =>
+                  onClick={() =>
                     onViewInProjectGraph({ projectName: project.name })
                   }
                 />
@@ -162,11 +162,11 @@ export const ProjectDetails = ({
 
 export default ProjectDetails;
 
-function ViewInProjectGraphButton({ callback }: { callback: () => void }) {
+function ViewInProjectGraphButton({ onClick }: { onClick: () => void }) {
   return (
     <button
       className="inline-flex cursor-pointer items-center gap-2 rounded-md px-2 py-1 text-base text-slate-600 ring-2 ring-inset ring-slate-400/40 hover:bg-slate-50 dark:text-slate-300 dark:ring-slate-400/30 dark:hover:bg-slate-800/60"
-      onClick={() => callback()}
+      onClick={() => onClick()}
     >
       <EyeIcon className="h-5 w-5 "></EyeIcon>
       <span>View In Graph</span>

graph/ui-project-details/src/lib/utils/group-targets.ts

@@ -12,9 +12,9 @@ export function groupTargets(project: ProjectGraphProjectNode): {
   groups: Record<string, string[]>;
   targets: string[];
 } {
-  const targetGroups = project.data.metadata?.targetGroups ?? {};
+  const targetGroups = { ...(project.data.metadata?.targetGroups ?? {}) };
   Object.entries(targetGroups).forEach(([group, targets]) => {
-    targetGroups[group] = targets.sort(sortNxReleasePublishLast);
+    targetGroups[group] = [...targets].sort(sortNxReleasePublishLast);
   });
   const allTargetsInTargetGroups: string[] = Object.values(targetGroups).flat();
   const targets: string[] = Object.keys(project.data.targets ?? {})

package.json

@@ -323,7 +323,7 @@
     "@markdoc/markdoc": "0.2.2",
     "@monaco-editor/react": "^4.4.6",
     "@napi-rs/canvas": "^0.1.52",
-    "@nx/graph": "0.0.1-alpha.15",
+    "@nx/graph": "0.0.1-alpha.16",
     "@react-spring/three": "^9.7.3",
     "@react-three/drei": "^9.108.3",
     "@react-three/fiber": "^8.16.8",

pnpm-lock.yaml

@@ -31,8 +31,8 @@ importers:
         specifier: ^0.1.52
         version: 0.1.52
       '@nx/graph':
-        specifier: 0.0.1-alpha.15
+        specifier: 0.0.1-alpha.16
-        version: 0.0.1-alpha.15(@nx/devkit@19.7.0-beta.6(nx@19.7.0-beta.6(@swc-node/register@1.9.1(@swc/core@1.5.7(@swc/helpers@0.5.11))(@swc/types@0.1.7)(typescript@5.5.3))(@swc/core@1.5.7(@swc/helpers@0.5.11))))(nx@19.7.0-beta.6(@swc-node/register@1.9.1(@swc/core@1.5.7(@swc/helpers@0.5.11))(@swc/types@0.1.7)(typescript@5.5.3))(@swc/core@1.5.7(@swc/helpers@0.5.11)))(react-dom@18.3.1(react@18.3.1))(react-router-dom@6.23.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react@18.3.1)
+        version: 0.0.1-alpha.16(@nx/devkit@19.7.0-beta.6(nx@19.7.0-beta.6(@swc-node/register@1.9.1(@swc/core@1.5.7(@swc/helpers@0.5.11))(@swc/types@0.1.7)(typescript@5.5.3))(@swc/core@1.5.7(@swc/helpers@0.5.11))))(nx@19.7.0-beta.6(@swc-node/register@1.9.1(@swc/core@1.5.7(@swc/helpers@0.5.11))(@swc/types@0.1.7)(typescript@5.5.3))(@swc/core@1.5.7(@swc/helpers@0.5.11)))(react-dom@18.3.1(react@18.3.1))(react-router-dom@6.23.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react@18.3.1)
       '@react-spring/three':
         specifier: ^9.7.3
         version: 9.7.3(@react-three/fiber@8.16.8(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(three@0.166.1))(react@18.3.1)(three@0.166.1)
@@ -990,7 +990,7 @@ importers:
         version: 5.88.0(@swc/core@1.5.7(@swc/helpers@0.5.11))(esbuild@0.19.5)(webpack-cli@5.1.4)
       webpack-dev-server:
         specifier: 5.0.4
-        version: 5.0.4(bufferutil@4.0.7)(utf-8-validate@5.0.10)(webpack-cli@5.1.4(webpack-dev-server@5.0.4)(webpack@5.88.0))(webpack@5.88.0(@swc/core@1.5.7(@swc/helpers@0.5.11))(esbuild@0.19.5)(webpack-cli@5.1.4))
+        version: 5.0.4(bufferutil@4.0.7)(utf-8-validate@5.0.10)(webpack-cli@5.1.4)(webpack@5.88.0)
       webpack-merge:
         specifier: ^5.8.0
         version: 5.8.0
@@ -5804,8 +5804,8 @@ packages:
       '@zkochan/js-yaml':
         optional: true
 
-  '@nx/graph@0.0.1-alpha.15':
+  '@nx/graph@0.0.1-alpha.16':
-    resolution: {integrity: sha512-wwotjQcUCz46NknyvZ99Pi0qpvVul6Maa1Y+bvcd6SUgrpmbfW/zyMQejlyq+iKufZCTJv/iiDUIKZEKvvVRjw==}
+    resolution: {integrity: sha512-pJVFuTunlRfa8BuO2Vy6wxRtfC2kDT3TKDR6y1KXmMl90xTVT30zU/K9ITXPZzLfo8nLpewIfbv41gGSCY9+Dg==}
     peerDependencies:
       '@nx/devkit': '>= 19 < 20'
       nx: '>= 19 < 20'
@@ -18608,7 +18608,7 @@ snapshots:
     dependencies:
       '@ampproject/remapping': 2.3.0
       '@angular-devkit/architect': 0.1802.1(chokidar@3.6.0)
-      '@angular-devkit/build-webpack': 0.1802.1(chokidar@3.6.0)(webpack-dev-server@5.0.4(bufferutil@4.0.7)(utf-8-validate@5.0.10)(webpack-cli@5.1.4(webpack-dev-server@5.0.4)(webpack@5.88.0))(webpack@5.93.0(@swc/core@1.5.7(@swc/helpers@0.5.11))(esbuild@0.23.0)(webpack-cli@5.1.4(webpack-dev-server@5.0.4)(webpack@5.88.0))))(webpack@5.93.0(@swc/core@1.5.7(@swc/helpers@0.5.11))(esbuild@0.23.0)(webpack-cli@5.1.4(webpack-dev-server@5.0.4)(webpack@5.88.0)))
+      '@angular-devkit/build-webpack': 0.1802.1(chokidar@3.6.0)(webpack-dev-server@5.0.4(bufferutil@4.0.7)(utf-8-validate@5.0.10)(webpack-cli@5.1.4)(webpack@5.88.0))(webpack@5.93.0(@swc/core@1.5.7(@swc/helpers@0.5.11))(esbuild@0.23.0)(webpack-cli@5.1.4(webpack-dev-server@5.0.4)(webpack@5.88.0)))
       '@angular-devkit/core': 18.2.1(chokidar@3.6.0)
       '@angular/build': 18.2.1(@angular/compiler-cli@18.2.1(@angular/compiler@18.2.1(@angular/core@18.2.1(rxjs@7.8.1)(zone.js@0.14.3)))(typescript@5.5.3))(@types/node@18.19.8)(chokidar@3.6.0)(less@4.2.0)(postcss@8.4.41)(stylus@0.59.0)(tailwindcss@3.4.4(ts-node@10.9.1(@swc/core@1.5.7(@swc/helpers@0.5.11))(@types/node@18.19.8)(typescript@5.5.3)))(terser@5.31.6)(typescript@5.5.3)
       '@angular/compiler-cli': 18.2.1(@angular/compiler@18.2.1(@angular/core@18.2.1(rxjs@7.8.1)(zone.js@0.14.3)))(typescript@5.5.3)
@@ -18694,12 +18694,12 @@ snapshots:
       - utf-8-validate
       - webpack-cli
 
-  '@angular-devkit/build-webpack@0.1802.1(chokidar@3.6.0)(webpack-dev-server@5.0.4(bufferutil@4.0.7)(utf-8-validate@5.0.10)(webpack-cli@5.1.4(webpack-dev-server@5.0.4)(webpack@5.88.0))(webpack@5.93.0(@swc/core@1.5.7(@swc/helpers@0.5.11))(esbuild@0.23.0)(webpack-cli@5.1.4(webpack-dev-server@5.0.4)(webpack@5.88.0))))(webpack@5.93.0(@swc/core@1.5.7(@swc/helpers@0.5.11))(esbuild@0.23.0)(webpack-cli@5.1.4(webpack-dev-server@5.0.4)(webpack@5.88.0)))':
+  '@angular-devkit/build-webpack@0.1802.1(chokidar@3.6.0)(webpack-dev-server@5.0.4(bufferutil@4.0.7)(utf-8-validate@5.0.10)(webpack-cli@5.1.4)(webpack@5.88.0))(webpack@5.93.0(@swc/core@1.5.7(@swc/helpers@0.5.11))(esbuild@0.23.0)(webpack-cli@5.1.4(webpack-dev-server@5.0.4)(webpack@5.88.0)))':
     dependencies:
       '@angular-devkit/architect': 0.1802.1(chokidar@3.6.0)
       rxjs: 7.8.1
       webpack: 5.93.0(@swc/core@1.5.7(@swc/helpers@0.5.11))(esbuild@0.23.0)(webpack-cli@5.1.4(webpack-dev-server@5.0.4)(webpack@5.88.0))
-      webpack-dev-server: 5.0.4(bufferutil@4.0.7)(utf-8-validate@5.0.10)(webpack-cli@5.1.4(webpack-dev-server@5.0.4)(webpack@5.88.0))(webpack@5.93.0(@swc/core@1.5.7(@swc/helpers@0.5.11))(esbuild@0.23.0)(webpack-cli@5.1.4(webpack-dev-server@5.0.4)(webpack@5.88.0)))
+      webpack-dev-server: 5.0.4(bufferutil@4.0.7)(utf-8-validate@5.0.10)(webpack-cli@5.1.4)(webpack@5.88.0)
     transitivePeerDependencies:
       - chokidar
 
@@ -25555,7 +25555,7 @@ snapshots:
       - supports-color
       - verdaccio
 
-  '@nx/graph@0.0.1-alpha.15(@nx/devkit@19.7.0-beta.6(nx@19.7.0-beta.6(@swc-node/register@1.9.1(@swc/core@1.5.7(@swc/helpers@0.5.11))(@swc/types@0.1.7)(typescript@5.5.3))(@swc/core@1.5.7(@swc/helpers@0.5.11))))(nx@19.7.0-beta.6(@swc-node/register@1.9.1(@swc/core@1.5.7(@swc/helpers@0.5.11))(@swc/types@0.1.7)(typescript@5.5.3))(@swc/core@1.5.7(@swc/helpers@0.5.11)))(react-dom@18.3.1(react@18.3.1))(react-router-dom@6.23.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react@18.3.1)':
+  '@nx/graph@0.0.1-alpha.16(@nx/devkit@19.7.0-beta.6(nx@19.7.0-beta.6(@swc-node/register@1.9.1(@swc/core@1.5.7(@swc/helpers@0.5.11))(@swc/types@0.1.7)(typescript@5.5.3))(@swc/core@1.5.7(@swc/helpers@0.5.11))))(nx@19.7.0-beta.6(@swc-node/register@1.9.1(@swc/core@1.5.7(@swc/helpers@0.5.11))(@swc/types@0.1.7)(typescript@5.5.3))(@swc/core@1.5.7(@swc/helpers@0.5.11)))(react-dom@18.3.1(react@18.3.1))(react-router-dom@6.23.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react@18.3.1)':
     dependencies:
       '@floating-ui/react': 0.26.6(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@headlessui/react': 1.7.19(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
@@ -26014,7 +26014,7 @@ snapshots:
       tsconfig-paths-webpack-plugin: 4.0.0
       tslib: 2.6.3
       webpack: 5.88.0(@swc/core@1.5.7(@swc/helpers@0.5.11))(esbuild@0.19.5)(webpack-cli@5.1.4)
-      webpack-dev-server: 5.0.4(bufferutil@4.0.7)(utf-8-validate@5.0.10)(webpack-cli@5.1.4(webpack-dev-server@5.0.4)(webpack@5.88.0))(webpack@5.88.0(@swc/core@1.5.7(@swc/helpers@0.5.11))(esbuild@0.19.5)(webpack-cli@5.1.4))
+      webpack-dev-server: 5.0.4(bufferutil@4.0.7)(utf-8-validate@5.0.10)(webpack-cli@5.1.4)(webpack@5.88.0)
       webpack-node-externals: 3.0.0
       webpack-subresource-integrity: 5.1.0(html-webpack-plugin@5.5.0(webpack@5.88.0(@swc/core@1.5.7(@swc/helpers@0.5.11))(esbuild@0.19.5)(webpack-cli@5.1.4)))(webpack@5.88.0(@swc/core@1.5.7(@swc/helpers@0.5.11))(esbuild@0.19.5)(webpack-cli@5.1.4))
     transitivePeerDependencies:
@@ -26404,7 +26404,7 @@ snapshots:
       webpack: 5.88.0(@swc/core@1.5.7(@swc/helpers@0.5.11))(esbuild@0.19.5)(webpack-cli@5.1.4)
     optionalDependencies:
       type-fest: 3.13.1
-      webpack-dev-server: 5.0.4(bufferutil@4.0.7)(utf-8-validate@5.0.10)(webpack-cli@5.1.4(webpack-dev-server@5.0.4)(webpack@5.88.0))(webpack@5.88.0(@swc/core@1.5.7(@swc/helpers@0.5.11))(esbuild@0.19.5)(webpack-cli@5.1.4))
+      webpack-dev-server: 5.0.4(bufferutil@4.0.7)(utf-8-validate@5.0.10)(webpack-cli@5.1.4)(webpack@5.88.0)
       webpack-hot-middleware: 2.25.3
 
   '@pnpm/lockfile-types@6.0.0':
@@ -29088,7 +29088,7 @@ snapshots:
       webpack: 5.88.0(@swc/core@1.5.7(@swc/helpers@0.5.11))(esbuild@0.19.5)(webpack-cli@5.1.4)
       webpack-cli: 5.1.4(webpack-dev-server@5.0.4)(webpack@5.88.0)
     optionalDependencies:
-      webpack-dev-server: 5.0.4(bufferutil@4.0.7)(utf-8-validate@5.0.10)(webpack-cli@5.1.4(webpack-dev-server@5.0.4)(webpack@5.88.0))(webpack@5.88.0(@swc/core@1.5.7(@swc/helpers@0.5.11))(esbuild@0.19.5)(webpack-cli@5.1.4))
+      webpack-dev-server: 5.0.4(bufferutil@4.0.7)(utf-8-validate@5.0.10)(webpack-cli@5.1.4)(webpack@5.88.0)
 
   '@widgetbot/embed-api@1.2.15':
     dependencies:
@@ -41463,7 +41463,7 @@ snapshots:
       webpack: 5.88.0(@swc/core@1.5.7(@swc/helpers@0.5.11))(esbuild@0.19.5)(webpack-cli@5.1.4)
       webpack-merge: 5.10.0
     optionalDependencies:
-      webpack-dev-server: 5.0.4(bufferutil@4.0.7)(utf-8-validate@5.0.10)(webpack-cli@5.1.4(webpack-dev-server@5.0.4)(webpack@5.88.0))(webpack@5.88.0(@swc/core@1.5.7(@swc/helpers@0.5.11))(esbuild@0.19.5)(webpack-cli@5.1.4))
+      webpack-dev-server: 5.0.4(bufferutil@4.0.7)(utf-8-validate@5.0.10)(webpack-cli@5.1.4)(webpack@5.88.0)
 
   webpack-dev-middleware@6.1.3(webpack@5.88.0(@swc/core@1.5.7(@swc/helpers@0.5.11))(esbuild@0.19.5)(webpack-cli@5.1.4)):
     dependencies:
@@ -41508,47 +41508,6 @@ snapshots:
     optionalDependencies:
       webpack: 5.93.0(@swc/core@1.5.7(@swc/helpers@0.5.11))(esbuild@0.23.0)(webpack-cli@5.1.4(webpack-dev-server@5.0.4)(webpack@5.88.0))
 
-  webpack-dev-server@5.0.4(bufferutil@4.0.7)(utf-8-validate@5.0.10)(webpack-cli@5.1.4(webpack-dev-server@5.0.4)(webpack@5.88.0))(webpack@5.88.0(@swc/core@1.5.7(@swc/helpers@0.5.11))(esbuild@0.19.5)(webpack-cli@5.1.4)):
-    dependencies:
-      '@types/bonjour': 3.5.13
-      '@types/connect-history-api-fallback': 1.5.4
-      '@types/express': 4.17.21
-      '@types/serve-index': 1.9.4
-      '@types/serve-static': 1.15.7
-      '@types/sockjs': 0.3.36
-      '@types/ws': 8.5.10
-      ansi-html-community: 0.0.8
-      bonjour-service: 1.2.1
-      chokidar: 3.6.0
-      colorette: 2.0.20
-      compression: 1.7.4
-      connect-history-api-fallback: 2.0.0
-      default-gateway: 6.0.3
-      express: 4.19.2
-      graceful-fs: 4.2.11
-      html-entities: 2.5.2
-      http-proxy-middleware: 2.0.6(@types/express@4.17.21)
-      ipaddr.js: 2.2.0
-      launch-editor: 2.6.1
-      open: 10.1.0
-      p-retry: 6.2.0
-      rimraf: 5.0.7
-      schema-utils: 4.2.0
-      selfsigned: 2.4.1
-      serve-index: 1.9.1
-      sockjs: 0.3.24
-      spdy: 4.0.2
-      webpack-dev-middleware: 7.2.1(webpack@5.88.0(@swc/core@1.5.7(@swc/helpers@0.5.11))(esbuild@0.19.5)(webpack-cli@5.1.4))
-      ws: 8.17.1(bufferutil@4.0.7)(utf-8-validate@5.0.10)
-    optionalDependencies:
-      webpack: 5.88.0(@swc/core@1.5.7(@swc/helpers@0.5.11))(esbuild@0.19.5)(webpack-cli@5.1.4)
-      webpack-cli: 5.1.4(webpack-dev-server@5.0.4)(webpack@5.88.0)
-    transitivePeerDependencies:
-      - bufferutil
-      - debug
-      - supports-color
-      - utf-8-validate
-
   webpack-dev-server@5.0.4(bufferutil@4.0.7)(utf-8-validate@5.0.10)(webpack-cli@5.1.4(webpack-dev-server@5.0.4)(webpack@5.88.0))(webpack@5.93.0(@swc/core@1.5.7(@swc/helpers@0.5.11))(esbuild@0.23.0)(webpack-cli@5.1.4(webpack-dev-server@5.0.4)(webpack@5.88.0))):
     dependencies:
       '@types/bonjour': 3.5.13
@@ -41590,6 +41549,47 @@ snapshots:
       - supports-color
       - utf-8-validate
 
+  webpack-dev-server@5.0.4(bufferutil@4.0.7)(utf-8-validate@5.0.10)(webpack-cli@5.1.4)(webpack@5.88.0):
+    dependencies:
+      '@types/bonjour': 3.5.13
+      '@types/connect-history-api-fallback': 1.5.4
+      '@types/express': 4.17.21
+      '@types/serve-index': 1.9.4
+      '@types/serve-static': 1.15.7
+      '@types/sockjs': 0.3.36
+      '@types/ws': 8.5.10
+      ansi-html-community: 0.0.8
+      bonjour-service: 1.2.1
+      chokidar: 3.6.0
+      colorette: 2.0.20
+      compression: 1.7.4
+      connect-history-api-fallback: 2.0.0
+      default-gateway: 6.0.3
+      express: 4.19.2
+      graceful-fs: 4.2.11
+      html-entities: 2.5.2
+      http-proxy-middleware: 2.0.6(@types/express@4.17.21)
+      ipaddr.js: 2.2.0
+      launch-editor: 2.6.1
+      open: 10.1.0
+      p-retry: 6.2.0
+      rimraf: 5.0.7
+      schema-utils: 4.2.0
+      selfsigned: 2.4.1
+      serve-index: 1.9.1
+      sockjs: 0.3.24
+      spdy: 4.0.2
+      webpack-dev-middleware: 7.2.1(webpack@5.88.0(@swc/core@1.5.7(@swc/helpers@0.5.11))(esbuild@0.19.5)(webpack-cli@5.1.4))
+      ws: 8.17.1(bufferutil@4.0.7)(utf-8-validate@5.0.10)
+    optionalDependencies:
+      webpack: 5.88.0(@swc/core@1.5.7(@swc/helpers@0.5.11))(esbuild@0.19.5)(webpack-cli@5.1.4)
+      webpack-cli: 5.1.4(webpack-dev-server@5.0.4)(webpack@5.88.0)
+    transitivePeerDependencies:
+      - bufferutil
+      - debug
+      - supports-color
+      - utf-8-validate
+
   webpack-hot-middleware@2.25.3:
     dependencies:
       ansi-html-community: 0.0.8