/
debugger-panel.tsx
51 lines (49 loc) · 1.61 KB
/
debugger-panel.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
import { memo } from 'react';
import { WorkspaceData, GraphPerfReport } from '../interfaces';
import { Dropdown } from '@nrwl/graph/ui-components';
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"
onChange={(event) => selectedProjectChange(event.currentTarget.value)}
>
{projects.map((projectGraph) => {
return (
<option
key={projectGraph.id}
value={projectGraph.id}
selected={projectGraph.id === selectedProject}
>
{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>
);
});