feat(graph): add nx console data loader (nrwl#20744)

graph/client/src/app/external-api-impl.ts

@@ -0,0 +1,133 @@
+import { ExternalApi, getExternalApiService } from '@nx/graph/shared';
+import { getRouter } from './get-router';
+import { getProjectGraphService } from './machines/get-services';
+import { getGraphService } from './machines/graph.service';
+
+export class ExternalApiImpl extends ExternalApi {
+  _projectGraphService = getProjectGraphService();
+  _graphIsReady = new Promise<void>((resolve) => {
+    this._projectGraphService.subscribe((state) => {
+      if (!state.matches('idle')) {
+        resolve();
+      }
+    });
+  });
+  _graphService = getGraphService();
+
+  router = getRouter();
+  externalApiService = getExternalApiService();
+
+  constructor() {
+    super();
+    this.externalApiService.subscribe(
+      ({ type, payload }: { type: string; payload: any }) => {
+        if (!this.graphInteractionEventListener) {
+          console.log('graphInteractionEventListener not registered.');
+          return;
+        }
+        if (type === 'file-click') {
+          const url = `${payload.sourceRoot}/${payload.file}`;
+          this.graphInteractionEventListener({
+            type: 'file-click',
+            payload: { url },
+          });
+        } else if (type === 'open-project-config') {
+          this.graphInteractionEventListener({
+            type: 'open-project-config',
+            payload,
+          });
+        } else if (type === 'run-task') {
+          this.graphInteractionEventListener({
+            type: 'run-task',
+            payload,
+          });
+        } else if (type === 'open-project-graph') {
+          this.graphInteractionEventListener({
+            type: 'open-project-graph',
+            payload,
+          });
+        } else if (type === 'open-task-graph') {
+          this.graphInteractionEventListener({
+            type: 'open-task-graph',
+            payload,
+          });
+        } else if (type === 'override-target') {
+          this.graphInteractionEventListener({
+            type: 'override-target',
+            payload,
+          });
+        } else {
+          console.log('unhandled event', type, payload);
+        }
+      }
+    );
+
+    // make sure properties set before are taken into account again
+    if (window.externalApi?.loadProjectGraph) {
+      this.loadProjectGraph = window.externalApi.loadProjectGraph;
+    }
+    if (window.externalApi?.loadTaskGraph) {
+      this.loadTaskGraph = window.externalApi.loadTaskGraph;
+    }
+    if (window.externalApi?.loadExpandedTaskInputs) {
+      this.loadExpandedTaskInputs = window.externalApi.loadExpandedTaskInputs;
+    }
+    if (window.externalApi?.loadSourceMaps) {
+      this.loadSourceMaps = window.externalApi.loadSourceMaps;
+    }
+    if (window.externalApi?.graphInteractionEventListener) {
+      this.graphInteractionEventListener =
+        window.externalApi.graphInteractionEventListener;
+    }
+  }
+
+  focusProject(projectName: string) {
+    this.router.navigate(`/projects/${encodeURIComponent(projectName)}`);
+  }
+
+  toggleSelectProject(projectName: string) {
+    this._graphIsReady.then(() => {
+      const projectSelected = this._projectGraphService
+        .getSnapshot()
+        .context.selectedProjects.find((p) => p === projectName);
+      if (!projectSelected) {
+        this._projectGraphService.send({ type: 'selectProject', projectName });
+      } else {
+        this._projectGraphService.send({
+          type: 'deselectProject',
+          projectName,
+        });
+      }
+    });
+  }
+
+  selectAllProjects() {
+    this.router.navigate(`/projects/all`);
+  }
+
+  showAffectedProjects() {
+    this.router.navigate(`/projects/affected`);
+  }
+
+  focusTarget(projectName: string, targetName: string) {
+    this.router.navigate(
+      `/tasks/${encodeURIComponent(targetName)}?projects=${encodeURIComponent(
+        projectName
+      )}`
+    );
+  }
+
+  selectAllTargetsByName(targetName: string) {
+    this.router.navigate(`/tasks/${encodeURIComponent(targetName)}/all`);
+  }
+
+  enableExperimentalFeatures() {
+    localStorage.setItem('showExperimentalFeatures', 'true');
+    window.appConfig.showExperimentalFeatures = true;
+  }
+
+  disableExperimentalFeatures() {
+    localStorage.setItem('showExperimentalFeatures', 'false');
+    window.appConfig.showExperimentalFeatures = false;
+  }
+}

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

@@ -7,7 +7,7 @@ import type {
 /* eslint-enable @nx/enforce-module-boundaries */
 import { interpret } from 'xstate';
 import { projectGraphMachine } from './project-graph.machine';
-import { AppConfig } from '../../interfaces';
+import { AppConfig } from '@nx/graph/shared';
 
 export const mockProjects: ProjectGraphProjectNode[] = [
   {

graph/client/src/app/feature-projects/project-list.tsx

@@ -15,15 +15,12 @@ import {
   selectedProjectNamesSelector,
   workspaceLayoutSelector,
 } from './machines/selectors';
-import {
-  getProjectsByType,
-  parseParentDirectoriesFromFilePath,
-  useRouteConstructor,
-} from '../util';
+import { getProjectsByType, parseParentDirectoriesFromFilePath } from '../util';
 import { ExperimentalFeature } from '../ui-components/experimental-feature';
 import { TracingAlgorithmType } from './machines/interfaces';
 import { getProjectGraphService } from '../machines/get-services';
 import { Link, useNavigate } from 'react-router-dom';
+import { useRouteConstructor } from '@nx/graph/shared';
 
 interface SidebarProject {
   projectGraphNode: ProjectGraphNode;

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

@@ -1,6 +1,11 @@
-import { useCallback, useEffect } from 'react';
+import { useCallback, useEffect, useState } from 'react';
+import { useIntervalWhen } from '../hooks/use-interval-when';
+import { getProjectGraphService } from '../machines/get-services';
 import { ExperimentalFeature } from '../ui-components/experimental-feature';
+import { FocusedPanel } from '../ui-components/focused-panel';
+import { ShowHideAll } from '../ui-components/show-hide-all';
 import { useProjectGraphSelector } from './hooks/use-project-graph-selector';
+import { TracingAlgorithmType } from './machines/interfaces';
 import {
   collapseEdgesSelector,
   focusedProjectNameSelector,
@@ -12,21 +17,17 @@ import {
   textFilterSelector,
 } from './machines/selectors';
 import { CollapseEdgesPanel } from './panels/collapse-edges-panel';
-import { FocusedPanel } from '../ui-components/focused-panel';
 import { GroupByFolderPanel } from './panels/group-by-folder-panel';
-import { ProjectList } from './project-list';
 import { SearchDepth } from './panels/search-depth';
-import { ShowHideAll } from '../ui-components/show-hide-all';
 import { TextFilterPanel } from './panels/text-filter-panel';
 import { TracingPanel } from './panels/tracing-panel';
-import { useEnvironmentConfig } from '../hooks/use-environment-config';
-import { TracingAlgorithmType } from './machines/interfaces';
-import { getProjectGraphService } from '../machines/get-services';
-import { useIntervalWhen } from '../hooks/use-interval-when';
+import { ProjectList } from './project-list';
 /* eslint-disable @nx/enforce-module-boundaries */
 // nx-ignore-next-line
 import { ProjectGraphClientResponse } from 'nx/src/command-line/graph/graph';
 /* eslint-enable @nx/enforce-module-boundaries */
+import { useFloating } from '@floating-ui/react';
+import { useEnvironmentConfig, useRouteConstructor } from '@nx/graph/shared';
 import {
   useNavigate,
   useParams,
@@ -35,7 +36,7 @@ import {
 } from 'react-router-dom';
 import { getProjectGraphDataService } from '../hooks/get-project-graph-data-service';
 import { useCurrentPath } from '../hooks/use-current-path';
-import { useRouteConstructor } from '../util';
+import { ProjectDetailsModal } from '../ui-components/project-details-modal';
 
 export function ProjectsSidebar(): JSX.Element {
   const environmentConfig = useEnvironmentConfig();
@@ -329,6 +330,8 @@ export function ProjectsSidebar(): JSX.Element {
 
   return (
     <>
+      <ProjectDetailsModal />
+
       {focusedProject ? (
         <FocusedPanel
           focusedLabel={focusedProject}

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

@@ -16,12 +16,11 @@ import { useEffect, useMemo } from 'react';
 import { getGraphService } from '../machines/graph.service';
 import { CheckboxPanel } from '../ui-components/checkbox-panel';
 
+import { useRouteConstructor } from '@nx/graph/shared';
 import { Dropdown } from '@nx/graph/ui-components';
 import { useCurrentPath } from '../hooks/use-current-path';
 import { ShowHideAll } from '../ui-components/show-hide-all';
-import { createTaskName, useRouteConstructor } from '../util';
-import { GraphInteractionEvents } from '@nx/graph/ui-graph';
-import { getProjectGraphDataService } from '../hooks/get-project-graph-data-service';
+import { createTaskName } from '../util';
 
 export function TasksSidebar() {
   const graphService = getGraphService();

graph/client/src/app/get-router.ts

@@ -1,15 +1,17 @@
 import { createBrowserRouter, createHashRouter } from 'react-router-dom';
 import { getRoutesForEnvironment } from './routes';
-import { getEnvironmentConfig } from './hooks/use-environment-config';
+import { getEnvironmentConfig } from '@nx/graph/shared';
 
 let router;
 
 export function getRouter() {
   if (!router) {
     const environmentConfig = getEnvironmentConfig();
-
     let routerCreate = createBrowserRouter;
-    if (environmentConfig.localMode === 'build') {
+    if (
+      environmentConfig.localMode === 'build' ||
+      environmentConfig.environment === 'nx-console'
+    ) {
       routerCreate = createHashRouter;
     }
 

graph/client/src/app/hooks/get-project-graph-data-service.ts

@@ -2,6 +2,7 @@ import { FetchProjectGraphService } from '../fetch-project-graph-service';
 import { ProjectGraphService } from '../interfaces';
 import { LocalProjectGraphService } from '../local-project-graph-service';
 import { MockProjectGraphService } from '../mock-project-graph-service';
+import { NxConsoleProjectGraphService } from '../nx-console-project-graph-service';
 
 let projectGraphService: ProjectGraphService;
 
@@ -11,10 +12,9 @@ export function getProjectGraphDataService() {
       projectGraphService = new FetchProjectGraphService();
     } else if (window.environment === 'watch') {
       projectGraphService = new MockProjectGraphService();
-    } else if (
-      window.environment === 'release' ||
-      window.environment === 'nx-console'
-    ) {
+    } else if (window.environment === 'nx-console') {
+      projectGraphService = new NxConsoleProjectGraphService();
+    } else if (window.environment === 'release') {
       if (window.localMode === 'build') {
         projectGraphService = new LocalProjectGraphService();
       } else {

graph/client/src/app/hooks/use-current-path.ts

@@ -1,7 +1,7 @@
 import { matchRoutes, useLocation } from 'react-router-dom';
 import { getRoutesForEnvironment } from '../routes';
-import { getEnvironmentConfig } from './use-environment-config';
 import { useState } from 'react';
+import { getEnvironmentConfig } from '@nx/graph/shared';
 
 export const useCurrentPath = () => {
   const [lastLocation, setLastLocation] = useState<string>();