miel.truyen/nx
1
0
Fork 0
Code Issues Pull Requests Actions 5 Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
MaxKless 2023-08-02 11:39:53 +02:00 committed by GitHub
parent 054a371aab
commit d5ceca9499
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 84 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
graph/client/src/app/external-api.ts
View File

@ -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) {

14
graph/ui-graph/src/lib/graph-interaction-events.ts
View File

@ -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;

18
graph/ui-graph/src/lib/tooltip-service.ts
View File

@ -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':

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

@ -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>
<Tag className="mr-3">{type}</Tag>
<span className="font-mono">{id}</span>
<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">

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

@ -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>
<Tag className="mr-3">{executor}</Tag>
<span className="font-mono">{id}</span>
<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>
);