feat(dep-graph): add project graph view for nx console

nrwl · Jul 15, 2022 · 76aac84 · 76aac84
1 parent 438ea6c
commit 76aac84
Show file tree

Hide file tree

Showing 10 changed files with 116 additions and 50 deletions.
diff --git a/dep-graph/client/project.json b/dep-graph/client/project.json
@@ -43,6 +43,21 @@
             }
           ]
         },
+        "nx-console": {
+          "assets": [
+            "dep-graph/client/src/favicon.ico",
+            {
+              "input": "dep-graph/client/src/assets/graphs",
+              "output": "/assets/graphs",
+              "glob": "nx-examples.json"
+            },
+            {
+              "input": "dep-graph/client/src/assets/nx-console",
+              "output": "/",
+              "glob": "environment.js"
+            }
+          ]
+        },
         "release": {
           "assets": [
             "dep-graph/client/src/favicon.ico",
@@ -91,6 +106,9 @@
         "dev": {
           "buildTarget": "dep-graph-client:build-base:dev"
         },
+        "nx-console": {
+          "buildTarget": "dep-graph-client:build-base:nx-console"
+        },
         "release": {
           "buildTarget": "dep-graph-client:build-base:release"
         },

diff --git a/dep-graph/client/src/app/hooks/use-environment-config.ts b/dep-graph/client/src/app/hooks/use-environment-config.ts
@@ -8,7 +8,7 @@ export function useEnvironmentConfig(): {
   watch: boolean;
   localMode: 'serve' | 'build';
   projectGraphResponse?: DepGraphClientResponse;
-  environment: 'dev' | 'watch' | 'release';
+  environment: 'dev' | 'watch' | 'release' | 'nx-console';
   appConfig: AppConfig;
   useXstateInspect: boolean;
 } {

diff --git a/dep-graph/client/src/app/hooks/use-project-graph-data-service.ts b/dep-graph/client/src/app/hooks/use-project-graph-data-service.ts
@@ -7,7 +7,7 @@ let projectGraphService: ProjectGraphService;
 
 export function useProjectGraphDataService() {
   if (projectGraphService === undefined) {
-    if (window.environment === 'dev') {
+    if (window.environment === 'dev' || window.environment === 'nx-console') {
       projectGraphService = new FetchProjectGraphService();
     } else if (window.environment === 'watch') {
       projectGraphService = new MockProjectGraphService();

diff --git a/dep-graph/client/src/app/machines/dep-graph.service.ts b/dep-graph/client/src/app/machines/dep-graph.service.ts
@@ -1,23 +1,13 @@
-import { interpret, Interpreter, Typestate } from 'xstate';
+import { interpret, InterpreterStatus } from 'xstate';
 import { depGraphMachine } from './dep-graph.machine';
-import {
-  DepGraphContext,
-  DepGraphSchema,
-  DepGraphUIEvents,
-} from './interfaces';
 
-let depGraphService: Interpreter<
-  DepGraphContext,
-  DepGraphSchema,
-  DepGraphUIEvents,
-  Typestate<DepGraphContext>
->;
+// TODO: figure out what happened to make the interprett return type get so weird
+let depGraphService = interpret(depGraphMachine, {
+  devTools: !!window.useXstateInspect,
+});
 
 export function getDepGraphService() {
-  if (!depGraphService) {
-    depGraphService = interpret(depGraphMachine, {
-      devTools: !!window.useXstateInspect,
-    });
+  if (depGraphService.status === InterpreterStatus.NotStarted) {
     depGraphService.start();
   }
 

diff --git a/dep-graph/client/src/app/machines/externalApi.ts b/dep-graph/client/src/app/machines/externalApi.ts
@@ -0,0 +1,9 @@
+import { getDepGraphService } from './dep-graph.service';
+
+export class ExternalApi {
+  depGraphService = getDepGraphService();
+
+  focusProject(projectName: string) {
+    this.depGraphService.send({ type: 'focusProject', projectName });
+  }
+}
diff --git a/dep-graph/client/src/app/machines/graph.ts b/dep-graph/client/src/app/machines/graph.ts
@@ -17,6 +17,7 @@ import {
   ProjectNode,
 } from '../util-cytoscape';
 import { GraphPerfReport, GraphRenderEvents } from './interfaces';
+import { getEnvironmentConfig } from '../hooks/use-environment-config';
 
 export class GraphService {
   private traversalGraph: cy.Core;
@@ -212,7 +213,19 @@ export class GraphService {
         });
       }
 
-      this.renderGraph.fit().center().resize();
+      const environmentConfig = getEnvironmentConfig();
+
+      if (environmentConfig.environment === 'nx-console') {
+        // when in the nx-console environment, adjust graph width and position to be to right of floating panel
+        // 175 is a magic number that represents the width of the floating panels divided in half plus some padding
+        this.renderGraph
+          .fit(this.renderGraph.elements(), 175)
+          .center()
+          .resize()
+          .panBy({ x: 150, y: 0 });
+      } else {
+        this.renderGraph.fit(this.renderGraph.elements(), 25).center().resize();
+      }
 
       selectedProjectNames = this.renderGraph
         .nodes('[type!="dir"]')

diff --git a/dep-graph/client/src/app/sidebar/sidebar.tsx b/dep-graph/client/src/app/sidebar/sidebar.tsx
@@ -23,8 +23,10 @@ import TextFilterPanel from './text-filter-panel';
 import ThemePanel from './theme-panel';
 import TracingPanel from './tracing-panel';
 import { TracingAlgorithmType } from '../machines/interfaces';
+import { useEnvironmentConfig } from '../hooks/use-environment-config';
 
 export function Sidebar() {
+  const environmentConfig = useEnvironmentConfig();
   const depGraphService = useDepGraphService();
   const focusedProject = useDepGraphSelector(focusedProjectNameSelector);
   const searchDepthInfo = useDepGraphSelector(searchDepthSelector);
@@ -110,45 +112,53 @@ export function Sidebar() {
 
   return (
     <div
-      className="relative flex h-full w-72 flex-col overflow-y-scroll pb-10 shadow-lg ring-1 ring-slate-900/10 ring-opacity-10 transition-all dark:ring-slate-300/10"
+      className={`${
+        environmentConfig.environment === 'nx-console'
+          ? 'absolute top-5 left-5 z-50 bg-white'
+          : 'relative flex h-full overflow-y-scroll'
+      } w-72 flex-col pb-10 shadow-lg ring-1 ring-slate-900/10 ring-opacity-10 transition-all dark:ring-slate-300/10`}
       id="sidebar"
     >
-      <div className="bg-blue-nx-base border-b border-slate-900/10 dark:border-slate-300/10 dark:bg-transparent">
-        <div className="mx-4 my-5 flex items-center justify-between">
-          <svg
-            className="h-12 w-auto text-white"
-            viewBox="0 0 24 24"
-            fill="currentColor"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <title>Nx</title>
-            <path d="M11.987 14.138l-3.132 4.923-5.193-8.427-.012 8.822H0V4.544h3.691l5.247 8.833.005-3.998 3.044 4.759zm.601-5.761c.024-.048 0-3.784.008-3.833h-3.65c.002.059-.005 3.776-.003 3.833h3.645zm5.634 4.134a2.061 2.061 0 0 0-1.969 1.336 1.963 1.963 0 0 1 2.343-.739c.396.161.917.422 1.33.283a2.1 2.1 0 0 0-1.704-.88zm3.39 1.061c-.375-.13-.8-.277-1.109-.681-.06-.08-.116-.17-.176-.265a2.143 2.143 0 0 0-.533-.642c-.294-.216-.68-.322-1.18-.322a2.482 2.482 0 0 0-2.294 1.536 2.325 2.325 0 0 1 4.002.388.75.75 0 0 0 .836.334c.493-.105.46.36 1.203.518v-.133c-.003-.446-.246-.55-.75-.733zm2.024 1.266a.723.723 0 0 0 .347-.638c-.01-2.957-2.41-5.487-5.37-5.487a5.364 5.364 0 0 0-4.487 2.418c-.01-.026-1.522-2.39-1.538-2.418H8.943l3.463 5.423-3.379 5.32h3.54l1.54-2.366 1.568 2.366h3.541l-3.21-5.052a.7.7 0 0 1-.084-.32 2.69 2.69 0 0 1 2.69-2.691h.001c1.488 0 1.736.89 2.057 1.308.634.826 1.9.464 1.9 1.541a.707.707 0 0 0 1.066.596zm.35.133c-.173.372-.56.338-.755.639-.176.271.114.412.114.412s.337.156.538-.311c.104-.231.14-.488.103-.74z" />
-          </svg>
-          <span className="ml-4 text-xl font-medium text-white">
-            {' '}
-            Project Graph{' '}
-          </span>
-          <ThemePanel />
-        </div>
-      </div>
+      {environmentConfig.environment !== 'nx-console' ? (
+        <>
+          <div className="bg-blue-nx-base border-b border-slate-900/10 dark:border-slate-300/10 dark:bg-transparent">
+            <div className="mx-4 my-5 flex items-center justify-between">
+              <svg
+                className="h-12 w-auto text-white"
+                viewBox="0 0 24 24"
+                fill="currentColor"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <title>Nx</title>
+                <path d="M11.987 14.138l-3.132 4.923-5.193-8.427-.012 8.822H0V4.544h3.691l5.247 8.833.005-3.998 3.044 4.759zm.601-5.761c.024-.048 0-3.784.008-3.833h-3.65c.002.059-.005 3.776-.003 3.833h3.645zm5.634 4.134a2.061 2.061 0 0 0-1.969 1.336 1.963 1.963 0 0 1 2.343-.739c.396.161.917.422 1.33.283a2.1 2.1 0 0 0-1.704-.88zm3.39 1.061c-.375-.13-.8-.277-1.109-.681-.06-.08-.116-.17-.176-.265a2.143 2.143 0 0 0-.533-.642c-.294-.216-.68-.322-1.18-.322a2.482 2.482 0 0 0-2.294 1.536 2.325 2.325 0 0 1 4.002.388.75.75 0 0 0 .836.334c.493-.105.46.36 1.203.518v-.133c-.003-.446-.246-.55-.75-.733zm2.024 1.266a.723.723 0 0 0 .347-.638c-.01-2.957-2.41-5.487-5.37-5.487a5.364 5.364 0 0 0-4.487 2.418c-.01-.026-1.522-2.39-1.538-2.418H8.943l3.463 5.423-3.379 5.32h3.54l1.54-2.366 1.568 2.366h3.541l-3.21-5.052a.7.7 0 0 1-.084-.32 2.69 2.69 0 0 1 2.69-2.691h.001c1.488 0 1.736.89 2.057 1.308.634.826 1.9.464 1.9 1.541a.707.707 0 0 0 1.066.596zm.35.133c-.173.372-.56.338-.755.639-.176.271.114.412.114.412s.337.156.538-.311c.104-.231.14-.488.103-.74z" />
+              </svg>
+              <span className="ml-4 text-xl font-medium text-white">
+                {' '}
+                Project Graph{' '}
+              </span>
+              <ThemePanel />
+            </div>
+          </div>
 
-      <a
-        id="help"
-        className="
+          <a
+            id="help"
+            className="
       mt-3
       flex cursor-pointer
       items-center
       px-4
       text-xs
       hover:underline
     "
-        href="https://nx.dev/structure/dependency-graph"
-        rel="noreferrer"
-        target="_blank"
-      >
-        <InformationCircleIcon className="mr-2 h-4 w-4" />
-        Analyse and visualize your workspace.
-      </a>
+            href="https://nx.dev/structure/dependency-graph"
+            rel="noreferrer"
+            target="_blank"
+          >
+            <InformationCircleIcon className="mr-2 h-4 w-4" />
+            Analyse and visualize your workspace.
+          </a>
+        </>
+      ) : null}
 
       {focusedProject ? (
         <FocusedProjectPanel
@@ -212,7 +222,9 @@ export function Sidebar() {
         </ExperimentalFeature>
       </div>
 
-      <ProjectList></ProjectList>
+      {environmentConfig.environment !== 'nx-console' ? (
+        <ProjectList></ProjectList>
+      ) : null}
     </div>
   );
 }

diff --git a/dep-graph/client/src/assets/nx-console/environment.js b/dep-graph/client/src/assets/nx-console/environment.js
@@ -0,0 +1,17 @@
+window.exclude = [];
+window.watch = false;
+window.environment = 'nx-console';
+window.useXstateInspect = false;
+
+window.appConfig = {
+  showDebugger: false,
+  showExperimentalFeatures: false,
+  projectGraphs: [
+    {
+      id: 'local',
+      label: 'local',
+      url: 'assets/graphs/nx-examples.json',
+    },
+  ],
+  defaultProjectGraph: 'local',
+};
diff --git a/dep-graph/client/src/globals.d.ts b/dep-graph/client/src/globals.d.ts
@@ -1,16 +1,18 @@
 // nx-ignore-next-line
 import type { DepGraphClientResponse } from 'nx/src/command-line/dep-graph';
 import { AppConfig } from './app/interfaces';
+import { ExternalApi } from './app/machines/externalApi';
 
 export declare global {
   export interface Window {
     exclude: string[];
     watch: boolean;
     localMode: 'serve' | 'build';
     projectGraphResponse?: DepGraphClientResponse;
-    environment: 'dev' | 'watch' | 'release';
+    environment: 'dev' | 'watch' | 'release' | 'nx-console';
     appConfig: AppConfig;
     useXstateInspect: boolean;
+    externalApi?: ExternalApi;
   }
 }
 

diff --git a/dep-graph/client/src/main.tsx b/dep-graph/client/src/main.tsx
@@ -2,6 +2,7 @@ import { StrictMode } from 'react';
 import * as ReactDOM from 'react-dom';
 import { inspect } from '@xstate/inspect';
 import App from './app/app';
+import { ExternalApi } from './app/machines/externalApi';
 
 if (window.useXstateInspect === true) {
   inspect({
@@ -10,6 +11,10 @@ if (window.useXstateInspect === true) {
   });
 }
 
+if (window.environment === 'nx-console') {
+  window.externalApi = new ExternalApi();
+}
+
 ReactDOM.render(
   <StrictMode>
     <App />