feat(graph): add more graph to editor communication (#18315)

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

@@ -23,6 +23,10 @@ export class ExternalApi {
   };
 
   private fileClickCallbackListeners: ((url: string) => void)[] = [];
+  private openProjectConfigCallbackListeners: ((
+    projectName: string
+  ) => void)[] = [];
+  private runTaskCallbackListeners: ((taskId: string) => void)[] = [];
 
   get depGraphService() {
     return this.projectGraphService;
@@ -34,6 +38,14 @@ export class ExternalApi {
         const url = `${event.sourceRoot}/${event.file}`;
         this.fileClickCallbackListeners.forEach((cb) => cb(url));
       }
+      if (event.type === 'ProjectOpenConfigClick') {
+        this.openProjectConfigCallbackListeners.forEach((cb) =>
+          cb(event.projectName)
+        );
+      }
+      if (event.type === 'RunTaskClick') {
+        this.runTaskCallbackListeners.forEach((cb) => cb(event.taskId));
+      }
     });
   }
 
@@ -58,6 +70,12 @@ export class ExternalApi {
   registerFileClickCallback(callback: (url: string) => void) {
     this.fileClickCallbackListeners.push(callback);
   }
+  registerOpenProjectConfigCallback(callback: (projectName: string) => void) {
+    this.openProjectConfigCallbackListeners.push(callback);
+  }
+  registerRunTaskCallback(callback: (taskId: string) => void) {
+    this.runTaskCallbackListeners.push(callback);
+  }
 
   private handleLegacyProjectGraphEvent(event: ProjectGraphMachineEvents) {
     switch (event.type) {

graph/ui-graph/src/lib/graph-interaction-events.ts

@@ -38,10 +38,22 @@ interface FileLinkClickEvent {
   file: string;
 }
 
+interface ProjectOpenConfigClickEvent {
+  type: 'ProjectOpenConfigClick';
+  projectName: string;
+}
+
+interface RunTaskClickEvent {
+  type: 'RunTaskClick';
+  taskId: string;
+}
+
 export type GraphInteractionEvents =
   | ProjectNodeClickEvent
   | EdgeClickEvent
   | GraphRegeneratedEvent
   | TaskNodeClickEvent
   | BackgroundClickEvent
-  | FileLinkClickEvent;
+  | FileLinkClickEvent
+  | ProjectOpenConfigClickEvent
+  | RunTaskClickEvent;

graph/ui-graph/src/lib/tooltip-service.ts

@@ -20,16 +20,34 @@ export class GraphTooltipService {
           this.hideAll();
           break;
         case 'ProjectNodeClick':
+          const openConfigCallback =
+            graph.renderMode === 'nx-console'
+              ? () =>
+                  graph.broadcast({
+                    type: 'ProjectOpenConfigClick',
+                    projectName: event.data.id,
+                  })
+              : undefined;
           this.openProjectNodeToolTip(event.ref, {
             id: event.data.id,
             tags: event.data.tags,
             type: event.data.type,
             description: event.data.description,
+            openConfigCallback,
           });
           break;
         case 'TaskNodeClick':
+          const runTaskCallback =
+            graph.renderMode === 'nx-console'
+              ? () =>
+                  graph.broadcast({
+                    type: 'RunTaskClick',
+                    taskId: event.data.id,
+                  })
+              : undefined;
           this.openTaskNodeTooltip(event.ref, {
             ...event.data,
+            runTaskCallback,
           });
           break;
         case 'EdgeClick':

graph/ui-tooltips/src/lib/project-node-tooltip.tsx

@@ -1,3 +1,4 @@
+import { PencilSquareIcon } from '@heroicons/react/24/outline';
 import { Tag } from '@nx/graph/ui-components';
 import { ReactNode } from 'react';
 
@@ -6,6 +7,7 @@ export interface ProjectNodeToolTipProps {
   id: string;
   tags: string[];
   description?: string;
+  openConfigCallback?: () => void;
 
   children?: ReactNode | ReactNode[];
 }
@@ -16,12 +18,24 @@ export function ProjectNodeToolTip({
   tags,
   children,
   description,
+  openConfigCallback,
 }: ProjectNodeToolTipProps) {
   return (
     <div className="text-sm text-slate-700 dark:text-slate-400">
-      <h4>
+      <h4 className="flex justify-between items-center gap-4">
+        <div className="flex items-center">
           <Tag className="mr-3">{type}</Tag>
           <span className="font-mono">{id}</span>
+        </div>
+        {openConfigCallback ? (
+          <button
+            className=" flex items-center rounded-md border-slate-300 bg-white p-1 font-medium text-slate-500 shadow-sm ring-1 transition hover:bg-slate-50 dark:border-slate-600 dark:bg-slate-800 dark:text-slate-400 dark:ring-slate-600 hover:dark:bg-slate-700"
+            title="Edit project.json in editor"
+            onClick={openConfigCallback}
+          >
+            <PencilSquareIcon className="h-5 w-5" />
+          </button>
+        ) : undefined}
       </h4>
       {tags.length > 0 ? (
         <p className="my-2">

graph/ui-tooltips/src/lib/task-node-tooltip.tsx

@@ -1,8 +1,10 @@
+import { PlayIcon } from '@heroicons/react/24/outline';
 import { Tag } from '@nx/graph/ui-components';
 
 export interface TaskNodeTooltipProps {
   id: string;
   executor: string;
+  runTaskCallback?: () => void;
   description?: string;
 }
 
@@ -10,13 +12,26 @@ export function TaskNodeTooltip({
   id,
   executor,
   description,
+  runTaskCallback: runTargetCallback,
 }: TaskNodeTooltipProps) {
   return (
     <div className="text-sm text-slate-700 dark:text-slate-400">
-      <h4>
+      <h4 className="flex justify-between items-center gap-4">
+        <div className="flex items-center">
           <Tag className="mr-3">{executor}</Tag>
           <span className="font-mono">{id}</span>
+        </div>
+        {runTargetCallback ? (
+          <button
+            className=" flex items-center rounded-md border-slate-300 bg-white p-1 font-medium text-slate-500 shadow-sm ring-1 transition hover:bg-slate-50 dark:border-slate-600 dark:bg-slate-800 dark:text-slate-400 dark:ring-slate-600 hover:dark:bg-slate-700"
+            title="Run Task"
+            onClick={runTargetCallback}
+          >
+            <PlayIcon className="h-5 w-5" />
+          </button>
+        ) : undefined}
       </h4>
+      <h4></h4>
       {description ? <p className="mt-4">{description}</p> : null}
     </div>
   );