50 lines
1.6 KiB
TypeScript
50 lines
1.6 KiB
TypeScript
import { memo } from 'react';
|
|
import { GraphPerfReport } from '../interfaces';
|
|
import { Dropdown } from '@nx/graph/legacy/components';
|
|
import type { WorkspaceData } from '@nx/graph/legacy/shared';
|
|
|
|
export interface DebuggerPanelProps {
|
|
projects: WorkspaceData[];
|
|
selectedProject: string;
|
|
selectedProjectChange: (projectName: string) => void;
|
|
lastPerfReport: GraphPerfReport;
|
|
}
|
|
|
|
export const DebuggerPanel = memo(function ({
|
|
projects,
|
|
selectedProject,
|
|
selectedProjectChange,
|
|
lastPerfReport,
|
|
}: DebuggerPanelProps) {
|
|
return (
|
|
<div
|
|
data-cy="debugger-panel"
|
|
className="flex-column flex w-auto items-center items-center justify-items-center justify-items-center gap-4 border-b border-slate-900/10 bg-slate-50 p-4 transition-all dark:border-slate-300/10 dark:bg-transparent"
|
|
>
|
|
<h4 className="dark:text-sidebar-title-dark mr-4 text-lg font-normal">
|
|
Debugger
|
|
</h4>
|
|
<Dropdown
|
|
data-cy="project-select"
|
|
defaultValue={selectedProject}
|
|
onChange={(event) => selectedProjectChange(event.currentTarget.value)}
|
|
>
|
|
{projects.map((projectGraph) => {
|
|
return (
|
|
<option key={projectGraph.id} value={projectGraph.id}>
|
|
{projectGraph.label}
|
|
</option>
|
|
);
|
|
})}
|
|
</Dropdown>
|
|
<p className="text-sm">
|
|
Last render took {lastPerfReport.renderTime}ms:{' '}
|
|
<b className="text-medium font-mono">{lastPerfReport.numNodes} nodes</b>{' '}
|
|
|{' '}
|
|
<b className="text-medium font-mono">{lastPerfReport.numEdges} edges</b>
|
|
.
|
|
</p>
|
|
</div>
|
|
);
|
|
});
|