{
- return Promise.resolve(['worker0']);
- }
-
- overviewGet(run: string, worker: string, span: string) {
- return Promise.resolve({
- steps: {
- columns: [
- { type: 'string', name: 'Step' },
- { type: 'number', name: 'Kernel' },
- { type: 'string', role: 'tooltip', p: { html: 'true' } },
- { type: 'number', name: 'Memcpy' },
- { type: 'string', role: 'tooltip', p: { html: 'true' } },
- { type: 'number', name: 'Memset' },
- { type: 'string', role: 'tooltip', p: { html: 'true' } },
- { type: 'number', name: 'Runtime' },
- { type: 'string', role: 'tooltip', p: { html: 'true' } },
- { type: 'number', name: 'DataLoader' },
- { type: 'string', role: 'tooltip', p: { html: 'true' } },
- { type: 'number', name: 'CPU Exec' },
- { type: 'string', role: 'tooltip', p: { html: 'true' } },
- { type: 'number', name: 'Other' },
- { type: 'string', role: 'tooltip', p: { html: 'true' } },
- ],
- rows: [
- [
- '5',
- 98598,
- 'Step 5Kernel: 98598us
',
- 1941,
- 'Step 5Memcpy: 1941us
',
- 90,
- 'Step 5Memset: 90us
',
- 2796,
- 'Step 5Runtime: 2796us
',
- 69317,
- 'Step 5DataLoader: 69317us
',
- 14091,
- 'Step 5CPU Exec: 14091us
',
- 1115,
- 'Step 5Other: 1115us
',
- ],
- [
- '6',
- 98570,
- 'Step 6Kernel: 98570us
',
- 1947,
- 'Step 6Memcpy: 1947us
',
- 89,
- 'Step 6Memset: 89us
',
- 2762,
- 'Step 6Runtime: 2762us
',
- 57669,
- 'Step 6DataLoader: 57669us
',
- 12968,
- 'Step 6CPU Exec: 12968us
',
- 1148,
- 'Step 6Other: 1148us
',
- ],
- [
- '7',
- 98596,
- 'Step 7Kernel: 98596us
',
- 1931,
- 'Step 7Memcpy: 1931us
',
- 91,
- 'Step 7Memset: 91us
',
- 2877,
- 'Step 7Runtime: 2877us
',
- 61257,
- 'Step 7DataLoader: 61257us
',
- 13768,
- 'Step 7CPU Exec: 13768us
',
- 1213,
- 'Step 7Other: 1213us
',
- ],
- [
- '8',
- 98623,
- 'Step 8Kernel: 98623us
',
- 1938,
- 'Step 8Memcpy: 1938us
',
- 89,
- 'Step 8Memset: 89us
',
- 2841,
- 'Step 8Runtime: 2841us
',
- 56453,
- 'Step 8DataLoader: 56453us
',
- 13420,
- 'Step 8CPU Exec: 13420us
',
- 1200,
- 'Step 8Other: 1200us
',
- ],
- [
- '9',
- 98504,
- 'Step 9Kernel: 98504us
',
- 1937,
- 'Step 9Memcpy: 1937us
',
- 87,
- 'Step 9Memset: 87us
',
- 2788,
- 'Step 9Runtime: 2788us
',
- 62690,
- 'Step 9DataLoader: 62690us
',
- 15025,
- 'Step 9CPU Exec: 15025us
',
- 1141,
- 'Step 9Other: 1141us
',
- ],
- [
- '10',
- 98641,
- 'Step 10Kernel: 98641us
',
- 1798,
- 'Step 10Memcpy: 1798us
',
- 88,
- 'Step 10Memset: 88us
',
- 3381,
- 'Step 10Runtime: 3381us
',
- 48185,
- 'Step 10DataLoader: 48185us
',
- 12773,
- 'Step 10CPU Exec: 12773us
',
- 1117,
- 'Step 10Other: 1117us
',
- ],
- ],
- },
- performance: [
- {
- name: 'Average Step Time',
- description: '',
- value: 177592,
- extra: 100,
- children: [
- { name: 'Kernel', description: '', value: 98589, extra: 55.51 },
- { name: 'Memcpy', description: '', value: 1915, extra: 1.08 },
- { name: 'Memset', description: '', value: 89, extra: 0.05 },
- { name: 'Runtime', description: '', value: 2908, extra: 1.64 },
- { name: 'DataLoader', description: '', value: 59262, extra: 33.37 },
- { name: 'CPU Exec', description: '', value: 13674, extra: 7.7 },
- { name: 'Other', description: '', value: 1156, extra: 0.65 },
- ],
- },
- ],
- recommendations:
- 'This run has high time cost on input data loading. 33.4% of the step time is in DataLoader. You could try to set num_workers on DataLoader\'s construction and enable multi-processes on data loading . Kernels with 68% time are launched by Tensor Cores eligible operators. You could enable Automatic Mixed Precision to speedup by using FP16. ('');
- const [runs, setRuns] = React.useState([]);
- const [runsLoading, setRunsLoading] = React.useState(true);
-
- const [workers, setWorkers] = React.useState([]);
- const [worker, setWorker] = React.useState('');
-
- const [spans, setSpans] = React.useState([]);
- const [span, setSpan] = React.useState('');
-
- const [views, setViews] = React.useState([]);
- const [view, setView] = React.useState('');
- const [loaded, setLoaded] = React.useState(false);
- const iframeRef = React.useRef(null);
- const [deviceTarget, setDeviceTarget] = React.useState('GPU');
-
- const [diffLeftWorkerOptions, setDiffLeftWorkerOptions] = React.useState([]);
- const [diffLeftSpansOptions, setDiffLeftSpansOptions] = React.useState([]);
- const [diffLeftRun, setDiffLeftRun] = React.useState('');
- const [diffLeftWorker, setDiffLeftWorker] = React.useState('');
- const [diffLeftSpan, setDiffLeftSpan] = React.useState('');
-
- const [diffRightWorkerOptions, setDiffRightWorkerOptions] = React.useState([]);
- const [diffRightSpansOptions, setDiffRightSpansOptions] = React.useState([]);
- const [diffRightRun, setDiffRightRun] = React.useState('');
- const [diffRightWorker, setDiffRightWorker] = React.useState('');
- const [diffRightSpan, setDiffRightSpan] = React.useState('');
-
- const [open, setOpen] = React.useState(true);
-
- const [topTab, setTopTab] = React.useState(0);
- const [fileList, setFileList] = React.useState([]);
- const [uploadedCount, setUploadedCount] = React.useState(0); // #endregion
-
- React.useEffect(() => {
- setup()
- .catch(() => {
- message.warning('google chart is not supported offline');
- })
- .finally(() => {
- setLoaded(true);
- });
- }, []);
-
- const continuouslyFetchRuns = async (): Promise => {
- while (true) {
- try {
- const result = await api.defaultApi.runsGet();
- setRuns(result.runs);
- setRunsLoading(result.loading);
- } catch (e) {
- message.warning(`Cannot fetch runs: ${e}`);
- }
- await sleep(5000);
- }
- };
-
- React.useEffect(() => {
- continuouslyFetchRuns();
- }, []);
-
- React.useEffect(() => {
- if (!run || !runs.includes(run)) {
- setRun(firstOrUndefined(runs) ?? '');
- }
- }, [runs]); // #region - Diff Left
-
- React.useEffect(() => {
- if (diffLeftRun) {
- api.defaultApi.workersGet(diffLeftRun, Views.Overview).then((data) => {
- setDiffLeftWorkerOptions(data);
- });
- }
- }, [diffLeftRun]);
-
- React.useEffect(() => {
- if (diffLeftRun && diffLeftWorker) {
- api.defaultApi.spansGet(diffLeftRun, diffLeftWorker).then((data) => {
- setDiffLeftSpansOptions(data);
- });
- }
- }, [diffLeftRun, diffLeftWorker]);
-
- // #endregion
- // #region - Diff Right
- React.useEffect(() => {
- if (diffRightRun) {
- api.defaultApi.workersGet(diffRightRun, Views.Overview).then((data) => {
- setDiffRightWorkerOptions(data);
- });
- }
- }, [diffRightRun]);
-
- React.useEffect(() => {
- if (diffRightRun && diffRightWorker) {
- api.defaultApi.spansGet(diffRightRun, diffRightWorker).then((data) => {
- setDiffRightSpansOptions(data);
- });
- }
- }, [diffRightRun, diffRightWorker]);
-
- // #endregion
- // #region - normal
- React.useEffect(() => {
- if (run) {
- api.defaultApi.viewsGet(run).then((rawViews) => {
- const result = rawViews.views.map((v) => Views[Views[v as Views]]).filter(Boolean);
- setDeviceTarget(rawViews.device_target);
- setViews(result);
- });
- }
- }, [run]);
-
- React.useEffect(() => {
- setView(firstOrUndefined(views) ?? '');
- }, [views]);
-
- React.useEffect(() => {
- if (run && view) {
- api.defaultApi.workersGet(run, view).then((data) => {
- setWorkers(data);
- });
- }
- }, [run, view]);
-
- React.useEffect(() => {
- setWorker(firstOrUndefined(workers) ?? '');
- }, [workers]);
-
- React.useEffect(() => {
- if (run && worker) {
- api.defaultApi.spansGet(run, worker).then((data) => {
- setSpans(data);
- });
- }
- }, [run, worker]);
-
- React.useEffect(() => {
- setSpan(firstOrUndefined(spans) ?? '');
- }, [spans]);
-
- // #endregion
-
- // #region - Event Handler
- const handleTabChange = (event: React.ChangeEvent>, value: any): void => {
- setSelectedTab(value as number);
- };
-
- const handleTopTabChange = (event: React.ChangeEvent>, value: any): void => {
- setTopTab(value as number);
- };
-
- const handleRunChange: SelectProps['onChange'] = (event) => {
- setRun(event.target.value as string);
- setView('');
- setWorker('');
- setSpan('');
- };
-
- const handleViewChange: SelectProps['onChange'] = (event) => {
- setView(event.target.value as Views);
- setWorker('');
- setSpan('');
- };
-
- const handleWorkerChange: SelectProps['onChange'] = (event) => {
- setWorker(event.target.value as string);
- setSpan('');
- };
-
- const handleSpanChange: SelectProps['onChange'] = (event) => {
- setSpan(event.target.value as string);
- };
-
- const handleDiffLeftRunChange: SelectProps['onChange'] = (event) => {
- setDiffLeftRun(event.target.value as string);
- setDiffLeftWorker('');
- setDiffLeftSpan('');
- };
-
- const handleDiffLeftWorkerChange: SelectProps['onChange'] = (event) => {
- setDiffLeftWorker(event.target.value as string);
- setDiffLeftSpan('');
- };
-
- const handleDiffLeftSpanChange: SelectProps['onChange'] = (event) => {
- setDiffLeftSpan(event.target.value as string);
- };
-
- const handleDiffRightRunChange: SelectProps['onChange'] = (event) => {
- setDiffRightRun(event.target.value as string);
- setDiffRightWorker('');
- setDiffRightSpan('');
- };
-
- const handleDiffRightWorkerChange: SelectProps['onChange'] = (event) => {
- setDiffRightWorker(event.target.value as string);
- setDiffRightSpan('');
- };
-
- const handleDiffRightSpanChange: SelectProps['onChange'] = (event) => {
- setDiffRightSpan(event.target.value as string);
- };
-
- const handleDrawerOpen = (): void => {
- setOpen(true);
- setIframeActive();
- };
-
- const handleDrawerClose = (): void => {
- setOpen(false);
- setIframeActive();
- };
-
- const setIframeActive = (): void => {
- iframeRef.current?.focus();
- };
-
- const _changeFileList = (files: FileInfo[]): void => {
- if (JSON.stringify(files) !== JSON.stringify(fileList)) {
- setFileList(files);
- }
- };
-
- const _getViews = (viewName: Views): string => {
- if (viewName === Views.Kernel) {
- return deviceTarget === 'Ascend' ? `NPU ${viewNames[viewName]}` : `GPU ${viewNames[viewName]}`;
- } else {
- return viewNames[viewName];
- }
- };
-
- const _changeUploadCount = (count: number): void => {
- setUploadedCount(count);
- }; // #endregion
-
- const renderContent = (): JSX.Element => {
- if (!runsLoading && runs.length === 0) {
- return (
-
-
- There are not any runs in the log folder.
-
-
- );
- }
- const notReady = !loaded || !run || !worker || !view || !span;
- if (notReady) {
- return
- Spans
-
-
-
- {spans.map((item) => (
- {item}
- ))}
-
-
-
-
- );
-
- if (!spans || spans.length <= 1) {
- return {spanFragment}
;
- } else {
- return spanFragment;
- }
- };
-
- return (
-
-
-
-
-
-
-
-
-
-
-
- {topTab === 0 ? (
- <>
-
-
-
-
- {selectedTab === 0 ? (
- <>
- Runs
-
-
-
- {runs.map((item) => (
- {item}
- ))}
-
-
-
- Views
-
-
-
- {views.map((item) => (
- {_getViews(item)}
- ))}
-
-
-
- Workers
-
-
-
- {workers.map((worker1) => (
- {worker1}
- ))}
-
-
-
- {spanComponent()}
-
- ) : (
- <>
- Baseline
- Runs
-
-
- {runs.map((item) => (
- {item}
- ))}
-
-
- Workers
-
-
-
- {diffLeftWorkerOptions.map((worker2) => (
- {worker2}
- ))}
-
-
- Spans
-
-
- {diffLeftSpansOptions.map((span1) => (
- {span1}
- ))}
-
-
-
- Experimental
- Runs
-
-
- {runs.map((item) => (
- {item}
- ))}
-
-
- Workers
-
-
- {diffRightWorkerOptions.map((worker3) => (
- {worker3}
- ))}
-
-
- Spans
-
-
- {diffRightSpansOptions.map((span2) => (
- {span2}
- ))}
-
-
-
- )}
-
- ) : (
-
- {!open && (
-
-
- )}
-
- {topTab === 0 ? renderContent() :
-
= (props) => {
- const { onChangeCheckedFileList, onChangeUploadedCount } = props;
- const classes = useStyles();
- const [configModalVis, setConfigModalVis] = useState(false);
- const [deleteModalVis, setDeleteModalVis] = useState(false);
- const [fileList, setFileList] = useState([]);
- const [importSpin, setImportSpin] = useState(false);
- const [selectedFile, setSelectedFile] = useState(undefined);
- const downLoadRef = useRef(null);
-
- const parseFile = (file: FileInfo): FileInfo => {
- file.losses = [];
- file.iterLosses = {};
- file.iters = [];
- const lines = file.fileContent.split(/\r\n|\n|\r/);
- for (let i = 0; i < lines.length; i++) {
- const iter = parseByTag(lines[i], file.iterTag, false);
- const loss = parseByTag(lines[i], file.lossTag, true);
- if (iter !== null && loss !== null) {
- file.iters.push(iter);
- file.losses.push([iter, loss]);
- file.iterLosses[iter] = loss;
- }
- }
- return file;
- };
-
- const parseByTag = (line: string, tag: string, isLoss: boolean): number | null => {
- let pos = line.indexOf(tag);
- let result: number | null = null;
- if (pos !== -1) {
- const res = (isLoss ? LOSS_REG_EXP : ITER_REG_EXP).exec(
- line
- .substring(pos + tag.length)
- .trim()
- .split(/\s+/)[0]
- );
- if (res !== null) {
- if (isLoss) {
- result = parseFloat(res[0]);
- } else {
- result = parseInt(res[0]);
- }
- } else {
- console.warn(`Found ${isLoss ? 'loss' : 'iteration'} text, but parse value with error: [${line}]`);
- }
- }
- return result;
- };
-
- const importFile = (): void => {
- document.getElementById('accComparisonSelectFile')?.click();
- };
-
- const uploadFile = (e: React.ChangeEvent): void => {
- setImportSpin(true);
- const file = e.target.files?.[0];
- if (file) {
- if (file.size > FILE_MAX_SIZE) {
- message.warn('Sorry, the file size cannot be greater than 50MB.');
- setImportSpin(false);
- // 防止同名文件不触发事件
- e.target.value = '';
- return;
- }
- const reader = new FileReader();
- reader.onload = ((loadedFile) => {
- return (event) => {
- addFile(loadedFile.name.trim(), event.target?.result as string);
- setImportSpin(false);
- };
- })(file);
- reader.readAsText(file);
- }
- // 防止同名文件不触发事件
- e.target.value = '';
- };
-
- const addFile = (fileName: string, fileContent: string): void => {
- const fileLength = fileName.length;
- const tempList: FileInfo[] = JSON.parse(JSON.stringify(fileList));
- let updatedFileName = fileName; // 新变量用于存储更新后的文件名
- // 上传同名文件加上(1~最大文件数减1)标识
- if (!!tempList.find((item) => item.fileName === fileName)) {
- for (let i = 1; i < MAX_FILE_COUNT; i++) {
- let temp = `${fileName.slice(0, fileLength - 4)}(${i})${fileName.slice(fileLength - 4)}`;
- if (tempList.find((item) => item.fileName === temp) === undefined) {
- updatedFileName = temp;
- break;
- }
- }
- }
- const file: FileInfo = {
- id: fileList.length,
- fileName: updatedFileName,
- fileContent,
- checked: true,
- lossTag: 'loss:',
- iterTag: 'iteration',
- iters: [],
- losses: [],
- iterLosses: {},
- };
- tempList.push(parseFile(file));
- setFileList(tempList);
- };
-
- const exportCsv = (data: FileInfo): void => {
- let csvContent = `data:text/csv;charset=utf-8,${data.iterTag},${data.lossTag}\n`;
- data.losses.forEach((item) => {
- csvContent += `${item[0]},${item[1]}\n`;
- });
- downLoadRef.current?.setAttribute('href', encodeURI(csvContent));
- downLoadRef.current?.setAttribute('download', `${data.fileName}.csv`);
- downLoadRef.current?.click();
- };
-
- const onCheckChange = (e: CheckboxChangeEvent, index: number): void => {
- const tempList: FileInfo[] = JSON.parse(JSON.stringify(fileList));
- tempList[index].checked = e.target.checked;
- setFileList(tempList);
- };
-
- const onConfigIconClick = (data: FileInfo): void => {
- setSelectedFile(data);
- setConfigModalVis(true);
- };
-
- const onDeleteIconClick = (data: FileInfo): void => {
- setSelectedFile(data);
- setDeleteModalVis(true);
- };
-
- const configModalOk = (data: FileInfo): void => {
- const tempList = fileList.map((item) => {
- return item.id === data.id ? parseFile(data) : item;
- });
- setFileList(tempList);
- setConfigModalVis(false);
- };
-
- const configModalCancel = (): void => {
- setConfigModalVis(false);
- };
-
- const deleteModalOk = (): void => {
- const tempList = JSON.parse(JSON.stringify(fileList));
- let founded = false;
- let index = 0;
- for (let i = 0; i < tempList.length; i++) {
- if (founded) {
- tempList[i].id -= 1;
- continue;
- }
- if (tempList[i].id === selectedFile?.id) {
- founded = true;
- index = i;
- }
- }
- tempList.splice(index, 1);
- setFileList(tempList);
- setSelectedFile(undefined);
- setDeleteModalVis(false);
- };
-
- const renderFileItems = useCallback(() => {
- return fileList.map((item) => {
- return (
-
-
onCheckChange(e, item.id)} />
-
- {item.fileName}
-
-
- onConfigIconClick(item)} />
- exportCsv(item)} />
- onDeleteIconClick(item)} />
-
-
-
-
-
- {renderFileItems()}
-
- {configModalVis && (
-
- )}
-
setDeleteModalVis(false)}
- onOk={deleteModalOk}
- width={500}
- className={classes.deleteModal}
- >
-
-
- Are you sure to delete "{selectedFile?.fileName} "?
-
-
-
-
-
= (props) => {
- const { fileList } = props;
- const classes = useStyles();
- const [selectedFiles, setSelectedFiles] = useState([]);
- const [compareWay, setCompareWay] = useState(0);
- const [pageSize, setPageSize] = useState(20);
- const [lineData, setLineData] = useState(undefined);
- const [tableData, setTableData] = useState([]);
- const chartRef = useRef(null);
-
- const getColumns = (): ColumnsType => {
- const columns: ColumnsType = [
- {
- title: 'Iteration',
- key: 'iter',
- dataIndex: 'iter',
- },
- ];
- selectedFiles.forEach((item, index) => {
- columns.push({
- title: () => (
-
- {item}
-
- ),
- key: index,
- dataIndex: item,
- width: '40%',
- });
- });
- return columns;
- };
-
- const compareFile = (fileNames: string[]): void => {
- if (fileNames.length < 2) {
- return;
- }
- const baseFile = fileList.find((item) => item.fileName === fileNames[0]);
- const expFile = fileList.find((item) => item.fileName === fileNames[1]);
- if (!!baseFile && !!expFile) {
- const commonIters: number[] = [];
- const lessIters = baseFile.iters.length <= expFile.iters.length ? baseFile.iters : expFile.iters;
- const moreIters = baseFile.iters.length > expFile.iters.length ? baseFile.iters : expFile.iters;
- lessIters.forEach((iter) => {
- if (moreIters.includes(iter)) {
- commonIters.push(iter);
- }
- });
- commonIters.sort((a, b) => a - b);
- const tempTableData: any[] = [];
- const tempChartData: ILineDataList = {
- normal: [],
- absolute: [],
- relative: [],
- };
- commonIters.forEach((iter, index) => {
- const baseLoss = baseFile.iterLosses[iter];
- const expLoss = expFile.iterLosses[iter];
- tempTableData.push({
- key: `${iter}_${index}`,
- iter,
- [baseFile.fileName]: baseLoss,
- [expFile.fileName]: expLoss,
- });
- tempChartData.normal.push([iter, expLoss - baseLoss]);
- tempChartData.absolute.push([iter, Math.abs(expLoss - baseLoss)]);
- tempChartData.relative.push([iter, baseLoss === 0 ? 0 : Math.abs(expLoss - baseLoss) / baseLoss]);
- });
- setTableData(tempTableData);
- setLineData(tempChartData);
- }
- };
-
- const onSelectChange = (value: string[]): void => {
- setSelectedFiles(value);
- compareFile(value);
- };
-
- const onRadioChange = (e: RadioChangeEvent): void => {
- setCompareWay(e.target.value);
- };
-
- const onShowSizeChange = (current: number, size: number): void => {
- setPageSize(size);
- };
-
- useLayoutEffect(() => {
- const element = chartRef.current;
- if (!element || !lineData) {
- return undefined;
- }
- const echart = echarts.init(element);
- let dataSource: number[][] = [];
- if (compareWay === 0) {
- dataSource = lineData.normal;
- } else if (compareWay === 1) {
- dataSource = lineData.absolute;
- } else {
- dataSource = lineData.relative;
- }
- const option: echarts.EChartsOption = {
- title: {
- text: 'Comparison Chart',
- textStyle: {
- fontSize: 12,
- color: '#000',
- },
- },
- legend: { bottom: 0 },
- xAxis: {
- type: 'category',
- boundaryGap: false,
- name: 'Iteration',
- },
- yAxis: {
- type: 'value',
- name: 'Difference',
- scale: true,
- },
- tooltip: {
- trigger: 'axis',
- valueFormatter: (value) => (value as number).toFixed(6),
- },
- dataZoom: {
- type: 'inside',
- },
- dataset: {
- source: dataSource,
- },
- series: {
- type: 'line',
- name: 'Difference',
- symbol: 'none',
- },
- };
-
- if (option) {
- echart.setOption(option, true);
- }
- return () => {
- echart.dispose();
- };
- }, [compareWay, lineData]);
-
- useEffect(() => {
- const tempValue = selectedFiles.filter((item) => {
- return !!fileList.find((file) => file.fileName === item);
- });
- if (JSON.stringify(tempValue) === JSON.stringify(selectedFiles)) {
- compareFile(tempValue);
- }
- setSelectedFiles(tempValue);
- }, [fileList]);
-
- return (
-
-
Comparison Data
-
-
Comparison objects:
-
{
- return {
- value: file.fileName,
- label: file.fileName,
- disabled: !selectedFiles.includes(file.fileName) && selectedFiles.length > 1,
- };
- })}
- />
- Comparison Setting:
-
- Comparison Normal
- Comparison Absolute
- Comparison Relative
-
-
-
- Normal: The real difference.
-
-
- Absolute: The absolute value of difference.
-
-
- Relative: The absolute value of difference divided by the loss value of the first file.
-
-
- }
- >
-
-
- {selectedFiles.length < 2 ? (
-
- ) : (
-
-
-
`Total ${total} items`,
- onShowSizeChange,
- }}
- />
-
- )}
-
- );
-};
diff --git a/plugins/tensorboard-plugins/tb_plugin/fe/src/components/Accuracy/LossComparison.tsx b/plugins/tensorboard-plugins/tb_plugin/fe/src/components/Accuracy/LossComparison.tsx
deleted file mode 100644
index fcf1c67953460c367246ee7a0374c7e6676ffda4..0000000000000000000000000000000000000000
--- a/plugins/tensorboard-plugins/tb_plugin/fe/src/components/Accuracy/LossComparison.tsx
+++ /dev/null
@@ -1,87 +0,0 @@
-/*---------------------------------------------------------------------------------------------
- * Copyright (c) Microsoft Corporation. All rights reserved.
- *--------------------------------------------------------------------------------------------
- * Copyright (c) 2023, Huawei Technologies.
- * All rights reserved.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *--------------------------------------------------------------------------------------------*/
-
-import * as React from 'react';
-import { makeStyles } from '@material-ui/core/styles';
-import { FileInfo } from './entity';
-import { Empty, message } from 'antd';
-import { LossDisplayPanel } from './LossDisplayPanel';
-import { ComparisonPanel } from './ComparisonPanel';
-import { MAX_FILE_COUNT } from './AccuracyLeftPanel';
-
-interface IProps {
- fileList: FileInfo[];
- fileCount: number;
-}
-
-const useStyles = makeStyles(() => ({
- root: {
- display: 'flex',
- flexDirection: 'column',
- alignItems: 'center',
- backgroundColor: 'white',
- height: '100%',
- overflowY: 'auto',
- '& .welcomeLabel': {
- marginTop: '18%',
- font: '36px bold',
- },
- '& .importText': {
- fontSize: 20,
- fontWeight: 400,
- margin: '24px 0',
- '& span': {
- cursor: 'pointer',
- color: '#0077ff',
- },
- },
- },
-}));
-
-export const LossComparison: React.FC = (props) => {
- const { fileList, fileCount } = props;
- const classes = useStyles();
-
- const onImportFile = (): void => {
- if (fileCount >= MAX_FILE_COUNT) {
- message.warn(`You can import no more than ${MAX_FILE_COUNT} files.`);
- return;
- }
- document.getElementById('accComparisonSelectFile')?.click();
- };
-
- return (
-
- {fileList.length <= 0 ? (
- <>
-
Welcome to loss comparison
-
- Select left files or Import files
-
-
-
- ) : (
- <>
-
- {fileList.length > 1 &&
}
-
- )}
-
= (props) => {
- const { fileList } = props;
- const classes = useStyles();
- const chartRef = useRef(null);
- const [pageSize, setPageSize] = useState(20);
- const totalRef = useRef(0);
-
- const getColumns = (): ColumnsType => {
- const columns: ColumnsType = [
- {
- title: 'Iteration',
- key: 'iter',
- dataIndex: 'iter',
- width: '20%',
- fixed: 'left',
- },
- ];
- fileList.forEach((item, index) => {
- columns.push({
- title: () => (
-
- {item.fileName}
-
- ),
- key: index,
- dataIndex: item.fileName,
- width: 150,
- });
- });
- return columns;
- };
-
- const getTableData = (): readonly any[] => {
- const dataSource: any[] = [];
- let allIters: number[] = [];
- fileList.forEach((file) => {
- allIters = allIters.concat(file.iters);
- });
- const uniqueIter = new Set(allIters.sort((a, b) => a - b));
- uniqueIter.forEach((iter, index) => {
- const fileLosses: { [fileName: string]: number | string } = {};
- fileList.forEach((file) => {
- fileLosses[file.fileName] = file.iterLosses[iter] ?? 'NA';
- });
- dataSource.push({
- key: `${iter}_${index}`,
- iter,
- ...fileLosses,
- });
- });
- totalRef.current = dataSource.length;
- return dataSource;
- };
-
- const onShowSizeChange = (current: number, size: number): void => {
- setPageSize(size);
- };
-
- useLayoutEffect(() => {
- const element = chartRef.current;
- if (!element) {
- return undefined;
- }
- const echart = echarts.init(element);
- const dataset: echarts.DatasetComponentOption[] = [];
- const series: echarts.SeriesOption[] = [];
- fileList.forEach((item, index) => {
- dataset.push({
- source: item.losses,
- });
- series.push({
- type: 'line',
- name: item.fileName,
- datasetIndex: index,
- symbol: 'none',
- });
- });
- let option: echarts.EChartsOption = {
- title: {
- text: 'Loss Chart',
- textStyle: {
- fontSize: 12,
- color: '#000',
- },
- },
- tooltip: {
- trigger: 'axis',
- confine: true,
- axisPointer: {
- label: {
- precision: 0,
- },
- },
- },
- legend: {
- type: 'scroll',
- bottom: 0,
- tooltip: {
- show: true,
- },
- formatter: (name) => {
- // Show ellipsis and set tooltip for legends with too long name
- return name.length > 50 ? `${name.slice(0, 48)}...` : name;
- },
- },
- xAxis: {
- type: 'value',
- boundaryGap: false,
- name: 'Iteration',
- minInterval: 1,
- },
- yAxis: {
- type: 'value',
- name: 'Loss',
- scale: true,
- },
- dataZoom: {
- type: 'inside',
- },
- dataset,
- series,
- };
-
- if (option) {
- echart.setOption(option, true);
- }
-
- return () => {
- echart.dispose();
- };
- }, [fileList]);
-
- return (
-
-
Loss Data
-
-
-
`Total ${total} items`,
- onShowSizeChange,
- }}
- />
-
-
- );
-};
diff --git a/plugins/tensorboard-plugins/tb_plugin/fe/src/components/Accuracy/RegexConfigModal.tsx b/plugins/tensorboard-plugins/tb_plugin/fe/src/components/Accuracy/RegexConfigModal.tsx
deleted file mode 100644
index 456fa2d9a2b6359ed5f03ad5763ef17373544ea4..0000000000000000000000000000000000000000
--- a/plugins/tensorboard-plugins/tb_plugin/fe/src/components/Accuracy/RegexConfigModal.tsx
+++ /dev/null
@@ -1,116 +0,0 @@
-/*---------------------------------------------------------------------------------------------
- * Copyright (c) Microsoft Corporation. All rights reserved.
- *--------------------------------------------------------------------------------------------
- * Copyright (c) 2023, Huawei Technologies.
- * All rights reserved.
- *
- * Licensed under the Apache License, Version 2.0 (the 'License')
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an 'AS IS' BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *--------------------------------------------------------------------------------------------*/
-
-import { Input, message, Modal } from 'antd';
-import * as React from 'react';
-import { useState } from 'react';
-import { makeStyles } from '@material-ui/core/styles';
-import { FileInfo } from './entity';
-
-interface IProps {
- file: FileInfo;
- onOk: (file: FileInfo) => void;
- onCancel: () => void;
-}
-
-const useStyles = makeStyles(() => ({
- root: {
- '& .ant-modal-title': {
- width: 500,
- overflow: 'hidden',
- textOverflow: 'ellipsis',
- whiteSpace: 'nowrap',
- fontWeight: 'bold',
- },
- },
- filterItem: {
- display: 'flex',
- height: 56,
- width: '100%',
- alignItems: 'center',
- '& .tagLabel': {
- display: 'inline-block',
- width: 100,
- },
- '& .ant-input': {
- width: 320,
- height: 32,
- },
- '& .ant-checkbox-wrapper': {
- marginLeft: 'auto',
- },
- },
-}));
-
-export const RegexConfigModal: React.FC = (props) => {
- const classes = useStyles();
- const [lossTag, setLossTag] = useState(props.file.lossTag);
- const [iterTag, setIterTag] = useState(props.file.iterTag);
-
- const lossTagChange = (e: React.ChangeEvent): void => {
- setLossTag(e.target.value);
- };
-
- const iterTagChange = (e: React.ChangeEvent): void => {
- setIterTag(e.target.value);
- };
-
- const configModalOk = (): void => {
- if (lossTag.trim() === '') {
- message.warning('Loss Tag cannot be empty or only spaces!');
- return;
- }
- if (iterTag.trim() === '') {
- message.warning('Iteration Tag cannot be empty or only spaces!');
- return;
- }
- if (lossTag === props.file.lossTag && iterTag === props.file.iterTag) {
- props.onCancel();
- } else {
- const configFile: FileInfo = {
- ...props.file,
- lossTag,
- iterTag,
- };
- props.onOk(configFile);
- }
- };
-
- return (
-
-
- Loss Tag
-
-
- Iteration Tag
-
-
- );
-};
diff --git a/plugins/tensorboard-plugins/tb_plugin/fe/src/components/Accuracy/entity.ts b/plugins/tensorboard-plugins/tb_plugin/fe/src/components/Accuracy/entity.ts
deleted file mode 100644
index 270c4cb6535633f9a03e5b9fe02dca6121cd3ba7..0000000000000000000000000000000000000000
--- a/plugins/tensorboard-plugins/tb_plugin/fe/src/components/Accuracy/entity.ts
+++ /dev/null
@@ -1,30 +0,0 @@
-/*---------------------------------------------------------------------------------------------
- * Copyright (c) Microsoft Corporation. All rights reserved.
- *--------------------------------------------------------------------------------------------
- * Copyright (c) 2023, Huawei Technologies.
- * All rights reserved.
- *
- * Licensed under the Apache License, Version 2.0 (the 'License')
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an 'AS IS' BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *--------------------------------------------------------------------------------------------*/
-
-export interface FileInfo {
- id: number;
- fileName: string;
- fileContent: string;
- checked: boolean;
- lossTag: string;
- iterTag: string;
- iters: number[];
- losses: number[][];
- iterLosses: { [iter: number]: number };
-}
diff --git a/plugins/tensorboard-plugins/tb_plugin/fe/src/components/DataLoading.tsx b/plugins/tensorboard-plugins/tb_plugin/fe/src/components/DataLoading.tsx
deleted file mode 100644
index 3c5d353ce641c409b51a7aaef8c00ff2f57df6e8..0000000000000000000000000000000000000000
--- a/plugins/tensorboard-plugins/tb_plugin/fe/src/components/DataLoading.tsx
+++ /dev/null
@@ -1,19 +0,0 @@
-/*---------------------------------------------------------------------------------------------
- * Copyright (c) Microsoft Corporation. All rights reserved.
- *--------------------------------------------------------------------------------------------*/
-
-import * as React from 'react';
-import { FullCircularProgress } from './FullCircularProgress';
-
-interface IProps {
- value?: T | null;
- children: (t: T) => JSX.Element;
-}
-
-export function DataLoading(props: IProps): JSX.Element {
- if (props.value === undefined || props.value === null) {
- return = (props: DiffColumnChartIProps) => {
- const { rawData, selectCallback } = props;
- const graphRef = React.useRef(null);
- const [resizeEventDependency] = useResizeEventDependency();
-
- React.useLayoutEffect(() => {
- const element = graphRef.current;
- if (!element) {
- return undefined;
- }
-
- const chart = echarts.init(element);
-
- const options: echarts.EChartsOption = {
- title: {
- text: 'Execution Comparsion',
- },
- legend: {
- top: 10,
- right: 10,
- },
- tooltip: {
- trigger: 'axis',
- formatter: function (params: any) {
- const index = params[0].name.indexOf('@');
- const safeName = params[0].name.replace(//g, '>');
- let res = `${index > -1 ? safeName.slice(index + 1) : safeName}
-
- ${item.seriesName}: ${item.value[item.encode.y[0]]} = (props: DiffStepChartIProps) => {
- const { rawData } = props;
- const graphRef = React.useRef(null);
- const [resizeEventDependency] = useResizeEventDependency();
-
- React.useLayoutEffect(() => {
- const element = graphRef.current;
- if (!element) {
- return undefined;
- }
- const chart = echarts.init(element);
- const options: echarts.EChartsOption = {
- title: {
- text: 'Execution Diff',
- },
- legend: {
- top: 10,
- right: 10,
- },
- dataset: {
- source: rawData.map((item, idx) => {
- // 添加索引保证x轴刻度不重复
- let param: any[] = [...item];
- param[0] = `${idx}@${param[0]}`;
- return param;
- }),
- },
- xAxis: {
- type: 'category',
- axisLabel: {
- interval: 0,
- rotate: getAngleByDataLength(rawData.length),
- formatter: (name: string) => {
- const index = name.indexOf('@');
- const displayName = index > -1 ? name.slice(index + 1) : name; // 创建新变量
- return displayName.length > 16 ? `${displayName.slice(0, 14)}...` : displayName;
- },
- },
- },
- yAxis: {
- type: 'value',
- scale: true,
- },
- tooltip: {
- trigger: 'axis',
- formatter: function (params: any) {
- const index = params[0].name.indexOf('@');
- const safeName = params[0].name.replace(//g, '>');
- let res = `${index > -1 ? safeName.slice(index + 1) : safeName}
-
- ${item.seriesName}: ${item.value[item.encode.y[0]]} = (props: IProps) => {
- // #region - Constant
- const COMPOSITE_NODES_NAME = 'CompositeNodes';
-
- const hostDurationColumns = [
- {
- title: 'Baseline Host Duration (us)',
- dataIndex: 'baselineHostDuration',
- key: 'baselineHostDuration',
- sorter: (a: TableRow, b: TableRow): number => {
- const aBaselineHost = a.baselineHostDuration ?? 0;
- const bBaselineHost = b.baselineHostDuration ?? 0;
- return aBaselineHost - bBaselineHost;
- },
- },
- {
- title: 'Exp Host Duration (us)',
- dataIndex: 'expHostDuration',
- key: 'expHostDuration',
- sorter: (a: TableRow, b: TableRow): number => {
- const aExpHost = a.expHostDuration ?? 0;
- const bExpHost = b.expHostDuration ?? 0;
- return aExpHost - bExpHost;
- },
- },
- {
- title: 'Delta Host Duration (us)',
- dataIndex: 'deltaHostDuration',
- key: 'deltaHostDuration',
- sorter: (a: TableRow, b: TableRow): number => {
- const aDeltaHost = a.deltaHostDuration ?? 0;
- const bDeltaHost = b.deltaHostDuration ?? 0;
- return aDeltaHost - bDeltaHost;
- },
- },
- {
- title: 'Delta Host Duration%',
- dataIndex: 'deltaHostDurationPercent',
- key: 'deltaHostDurationPercent',
- sorter: (a: TableRow, b: TableRow): number => {
- const aPercent = a.deltaHostDurationPercentNumber ?? 0;
- const bPercent = b.deltaHostDurationPercentNumber ?? 0;
- return aPercent - bPercent;
- },
- },
- ];
-
- const selfHostDurationColumns = [
- {
- title: 'Baseline Self Host Duration (us)',
- dataIndex: 'baselineSelfHostDuration',
- key: 'baselineSelfHostDuration',
- sorter: (a: TableRow, b: TableRow): number => a.baselineSelfHostDuration - b.baselineSelfHostDuration,
- },
- {
- title: 'Exp Self Host Duration (us)',
- dataIndex: 'expSelfHostDuration',
- key: 'expSelfHostDuration',
- sorter: (a: TableRow, b: TableRow): number => a.expSelfHostDuration - b.expSelfHostDuration,
- },
- {
- title: 'Delta Self Host Duration (us)',
- dataIndex: 'deltaSelfHostDuration',
- key: 'deltaSelfHostDuration',
- sorter: (a: TableRow, b: TableRow): number => {
- const aDeltaSelfHost = a.deltaSelfHostDuration ?? 0;
- const bDeltaSelfHost = b.deltaSelfHostDuration ?? 0;
- return aDeltaSelfHost - bDeltaSelfHost;
- },
- },
- {
- title: 'Delta Self Host Duration%',
- dataIndex: 'deltaSelfHostDurationPercent',
- key: 'deltaSelfHostDurationPercent',
- sorter: (a: TableRow, b: TableRow): number => {
- const aSelfPercent = a.deltaSelfHostDurationPercentNumber ?? 0;
- const bSelfPercent = b.deltaSelfHostDurationPercentNumber ?? 0;
- return aSelfPercent - bSelfPercent;
- },
- },
- ];
-
- const deviceDurationColumns = [
- {
- title: 'Baseline Device Duration (us)',
- dataIndex: 'baselineDeviceDuration',
- key: 'baselineDeviceDuration',
- sorter: (a: TableRow, b: TableRow): number => a.baselineDeviceDuration - b.baselineDeviceDuration,
- },
- {
- title: 'Exp Device Duration (us)',
- dataIndex: 'expDeviceDuration',
- key: 'expDeviceDuration',
- sorter: (a: TableRow, b: TableRow): number => a.expDeviceDuration - b.expDeviceDuration,
- },
- {
- title: 'Delta Device Duration (us)',
- dataIndex: 'deltaDeviceDuration',
- key: 'deltaDeviceDuration',
- sorter: (a: TableRow, b: TableRow): number => {
- const aDeltaDeviceDuration = a.deltaDeviceDuration ?? 0;
- const bdeltaDeviceDuration = b.deltaDeviceDuration ?? 0;
- return aDeltaDeviceDuration - bdeltaDeviceDuration;
- },
- },
- {
- title: 'Delta Device Duration%',
- dataIndex: 'deltaDeviceDurationPercent',
- key: 'deltaDeviceDurationPercent',
- sorter: (a: TableRow, b: TableRow): number => {
- const aDeltaDeviceDurationPercentNumber = a.deltaDeviceDurationPercentNumber ?? 0;
- const bDeltaDeviceDurationPercentNumber = b.deltaDeviceDurationPercentNumber ?? 0;
- return aDeltaDeviceDurationPercentNumber - bDeltaDeviceDurationPercentNumber;
- },
- },
- ];
-
- const selfDeviceDurationColumns = [
- {
- title: 'Baseline Self Device Duration (us)',
- dataIndex: 'baselineSelfDeviceDuration',
- key: 'baselineSelfDeviceDuration',
- sorter: (a: TableRow, b: TableRow): number => a.baselineSelfDeviceDuration - b.baselineSelfDeviceDuration,
- },
- {
- title: 'Exp Self Device Duration (us)',
- dataIndex: 'expSelfDeviceDuration',
- key: 'expSelfDeviceDuration',
- sorter: (a: TableRow, b: TableRow): number => a.expSelfDeviceDuration - b.expSelfDeviceDuration,
- },
- {
- title: 'Delta Self Device Duration (us)',
- dataIndex: 'deltaSelfDeviceDuration',
- key: 'deltaSelfDeviceDuration',
- sorter: (a: TableRow, b: TableRow): number => {
- const aDeltaSelfDeviceDuration = a.deltaSelfDeviceDuration ?? 0;
- const bDeltaSelfDeviceDuration = b.deltaSelfDeviceDuration ?? 0;
- return aDeltaSelfDeviceDuration - bDeltaSelfDeviceDuration;
- },
- },
- {
- title: 'Delta Self Device Duration%',
- dataIndex: 'deltaSelfDeviceDurationPercent',
- key: 'deltaSelfDeviceDurationPercent',
- sorter: (a: TableRow, b: TableRow): number => {
- const aDeltaSelfDeviceDurationPercentNumber = a.deltaSelfDeviceDurationPercentNumber ?? 0;
- const bDeltaSelfDeviceDurationPercentNumber = b.deltaSelfDeviceDurationPercentNumber ?? 0;
- return aDeltaSelfDeviceDurationPercentNumber - bDeltaSelfDeviceDurationPercentNumber;
- },
- },
- ];
-
- interface IColumnMap {
- [key: string]: any;
- }
- type IColumnMapType = IColumnMap;
-
- const tableSourceColumnMap: IColumnMapType = {
- selfHostDuration: selfHostDurationColumns,
- hostDuration: hostDurationColumns,
- deviceDuration: deviceDurationColumns,
- selfDeviceDuration: selfDeviceDurationColumns,
- };
-
- const baseTableColumns = [
- {
- title: 'Operator',
- dataIndex: 'operator',
- key: 'operator',
- sorter: (a: TableRow, b: TableRow) => a.operator.localeCompare(b.operator),
- },
- {
- title: 'Baseline Calls',
- dataIndex: 'baselineCalls',
- key: 'baselineCalls',
- sorter: (a: TableRow, b: TableRow) => a.baselineCalls ?? 0 - (b.baselineCalls ?? 0),
- },
- {
- title: 'Exp Calls',
- dataIndex: 'expCalls',
- key: 'expCalls',
- sorter: (a: TableRow, b: TableRow) => a.expCalls ?? 0 - (b.expCalls ?? 0),
- },
- {
- title: 'Delta Calls',
- dataIndex: 'deltaCalls',
- key: 'deltaCalls',
- sorter: (a: TableRow, b: TableRow) => a.deltaCalls ?? 0 - (b.deltaCalls ?? 0),
- },
- {
- title: 'Delta Calls%',
- dataIndex: 'deltaCallsPercent',
- key: 'deltaCallsPercent',
- sorter: (a: TableRow, b: TableRow) => a.deltaCallsPercentNumber ?? 0 - (b.deltaCallsPercentNumber ?? 0),
- },
- ];
-
- // #endregion
-
- // #region - State
- const [tableDataSource, setTableDataSource] = React.useState([]);
- const { run, worker, span, expRun, expWorker, expSpan } = props;
-
- const [columnUnderlyingData, setColumnUnderlyingData] = React.useState([]);
-
- const [rootUnderlyingData, setRootUnderlyingData] = React.useState();
-
- const [columnChartData, setColumnChartData] = React.useState([]);
- const [stepChartData, setStepChartData] = React.useState([]);
-
- const [selectedTableColumnsOptions, setSelectedTableColumnsOptions] = React.useState<[key: string]>(['hostDuration']);
- const [selectedTableColumns, setSelectedTableColumns] = React.useState([
- ...baseTableColumns,
- ...hostDurationColumns,
- ]);
-
- const [dataStackLevel, setDataStackLevel] = React.useState(0);
- const [loading, setLoading] = React.useState(false);
-
- // #endregion
- const classes = useStyles();
-
- // #region - Event Handler
- const handleChartColumnSelect = (row: number, column: number): void => {
- if (columnUnderlyingData.length === 0) {
- return;
- }
-
- let selectedUnderlyingData = columnUnderlyingData[row];
- if (!selectedUnderlyingData) {
- return;
- }
-
- let tableDataSource1 = generateDataSourceFromUnderlyingData(selectedUnderlyingData);
- setTableDataSource(tableDataSource1);
- columnTableDataSourceStack.push(tableDataSource1);
-
- setLoading(true);
-
- api.defaultApi
- .diffnodeGet(run, worker, span, expRun, expWorker, expSpan, selectedUnderlyingData.path)
- .then((resp) => handleDiffNodeResp(resp))
- .finally(() => setLoading(false));
- };
-
- const handleGoBack = (): void => {
- if (columnChartDataStack.length > 1) {
- columnChartDataStack.pop();
- let top = columnChartDataStack[columnChartDataStack.length - 1];
- setColumnChartData(top);
- }
-
- if (stepChartDataStack.length > 1) {
- stepChartDataStack.pop();
- let top = stepChartDataStack[stepChartDataStack.length - 1];
- setStepChartData(top);
- }
-
- if (columnUnderlyingDataStack.length > 0) {
- columnUnderlyingDataStack.pop();
- let top = columnUnderlyingDataStack[columnUnderlyingDataStack.length - 1];
- setColumnUnderlyingData(top);
- }
-
- if (columnTableDataSourceStack.length > 0) {
- columnTableDataSourceStack.pop();
- let top = columnTableDataSourceStack[columnTableDataSourceStack.length - 1];
-
- if (top) {
- setTableDataSource(top);
- } else {
- let tableDataSource2 = generateDataSourceFromUnderlyingData(rootUnderlyingData);
- setTableDataSource(tableDataSource2);
- }
- }
-
- setDataStackLevel(dataStackLevel - 1);
- };
-
- const toPercentString = (percentNumber: number): string => {
- if (isNaN(percentNumber)) {
- return 'N/A';
- }
-
- return `${percentNumber.toFixed(2)}%`;
- };
-
- const handleColumnSelectionChange = (value: [key: string]): void => {
- let columns = value.map((x) => tableSourceColumnMap[x]).flat();
- let r = [...baseTableColumns, ...columns];
- setSelectedTableColumnsOptions(value);
- setSelectedTableColumns(r);
- };
-
- const generateDataSourceFromUnderlyingData = (selectedUnderlyingData?: ColumnUnderlyingData): TableRow[] => {
- if (!selectedUnderlyingData) {
- return [];
- }
- let newTableDataSource: TableRow[] = [];
-
- for (let i = 0; i < selectedUnderlyingData.leftAggs.length; i++) {
- let left = selectedUnderlyingData.leftAggs[i];
- let right = selectedUnderlyingData.rightAggs[i];
-
- let deltaCallsPercentNumber = ((right.calls - left.calls) / left.calls) * 100;
-
- let deltaHostDurationPercentNumber = ((right.host_duration - left.host_duration) / left.host_duration) * 100;
-
- let deltaSelfHostDurationPercentNumber =
- ((right.self_host_duration - left.self_host_duration) / left.self_host_duration) * 100;
-
- let deltaDeviceDurationPercentNumber =
- ((right.device_duration - left.device_duration) / left.device_duration) * 100;
-
- let deltaSelfDeviceDurationPercentNumber =
- ((right.self_device_duration - left.self_device_duration) / left.self_device_duration) * 100;
-
- newTableDataSource.push({
- key: i,
- operator: left.name,
- baselineCalls: left.calls,
- expCalls: right.calls,
- deltaCalls: right.calls - left.calls,
- deltaCallsPercentNumber: deltaCallsPercentNumber,
- deltaCallsPercent: toPercentString(deltaCallsPercentNumber),
-
- baselineHostDuration: left.host_duration,
- expHostDuration: right.host_duration,
- deltaHostDuration: parseFloat((right.host_duration - left.host_duration).toFixed(3)),
- deltaHostDurationPercentNumber: deltaHostDurationPercentNumber,
- deltaHostDurationPercent: toPercentString(deltaHostDurationPercentNumber),
-
- baselineSelfHostDuration: left.self_host_duration,
- expSelfHostDuration: right.self_host_duration,
- deltaSelfHostDuration: parseFloat((right.self_host_duration - left.self_host_duration).toFixed(3)),
- deltaSelfHostDurationPercentNumber: deltaSelfHostDurationPercentNumber,
- deltaSelfHostDurationPercent: toPercentString(deltaSelfHostDurationPercentNumber),
-
- baselineDeviceDuration: left.device_duration,
- expDeviceDuration: right.device_duration,
- deltaDeviceDuration: parseFloat((right.device_duration - left.device_duration).toFixed(3)),
- deltaDeviceDurationPercentNumber: deltaDeviceDurationPercentNumber,
- deltaDeviceDurationPercent: toPercentString(deltaDeviceDurationPercentNumber),
-
- baselineSelfDeviceDuration: left.self_device_duration,
- expSelfDeviceDuration: right.self_device_duration,
- deltaSelfDeviceDuration: parseFloat((right.self_device_duration - left.self_device_duration).toFixed(3)),
- deltaSelfDeviceDurationPercentNumber: deltaSelfDeviceDurationPercentNumber,
- deltaSelfDeviceDurationPercent: toPercentString(deltaSelfDeviceDurationPercentNumber),
- });
- }
-
- return newTableDataSource;
- };
-
- React.useEffect(() => {
- const hasData =
- run.length > 0 &&
- worker.length > 0 &&
- span.length > 0 &&
- expRun.length > 0 &&
- expWorker.length > 0 &&
- expSpan.length > 0;
- if (hasData) {
- setLoading(true);
-
- columnChartDataStack = [];
- stepChartDataStack = [];
- columnUnderlyingDataStack = [];
- columnTableDataSourceStack = [];
-
- api.defaultApi
- .diffnodeGet(run, worker, span, expRun, expWorker, expSpan)
- .then((resp) => {
- handleDiffNodeResp(resp);
- let newRootUnderlyingData = {
- name: 'rootNode',
- path: resp.path,
- leftAggs: resp.left.aggs,
- rightAggs: resp.right.aggs,
- };
-
- setRootUnderlyingData(newRootUnderlyingData);
- let tableDataSource3 = generateDataSourceFromUnderlyingData(newRootUnderlyingData);
- setTableDataSource(tableDataSource3);
- })
- .finally(() => setLoading(false));
-
- setSelectedTableColumns([...baseTableColumns, ...hostDurationColumns]);
- }
- }, [run, worker, span, expRun, expWorker, expSpan]);
-
- const handleDiffNodeResp = (resp: any): void => {
- let newColumnChartData: any[] = [];
- let newStepChartData: any[] = [];
- let underlyingData: ColumnUnderlyingData[] = [];
-
- newColumnChartData.push(['Call', 'Baseline', 'Experiment', 'Baseline Trend', 'Exp Trend']);
- newStepChartData.push(['Call', 'Diff', 'Accumulated Diff']);
-
- if (resp.children.length > 0) {
- let accumulatedLeftDuration = 0;
- let accumulatedRightDuration = 0;
- let accumulatedStepDiff = 0;
- for (let i = 0; i < resp.children.length; i++) {
- let left = resp.children[i].left;
- let right = resp.children[i].right;
- let currColumn: any[] = [];
- let currStep: any[] = [];
-
- let name = left.name;
- if (name === COMPOSITE_NODES_NAME) {
- continue;
- }
-
- if (name.startsWith('aten::')) {
- // Ignore aten operators
- continue;
- }
-
- if (name.startsWith('enumerate(DataLoader)')) {
- name = name.substring(21);
- }
-
- if (name.startsWith('enumerate(DataPipe)')) {
- name = name.substring(19);
- }
-
- if (name.startsWith('nn.Module: ')) {
- name = name.substring(11);
- }
-
- if (name.startsWith('Optimizer.zero_grad')) {
- name = 'Optimizer.zero_grad';
- }
-
- if (name.startsWith('Optimizer.step')) {
- name = 'Optimizer.step';
- }
-
- currColumn.push(name);
- currColumn.push(left.total_duration);
- currColumn.push(right.total_duration);
-
- accumulatedLeftDuration += left.total_duration;
- currColumn.push(accumulatedLeftDuration);
-
- accumulatedRightDuration += right.total_duration;
- currColumn.push(accumulatedRightDuration);
- newColumnChartData.push(currColumn);
-
- underlyingData.push({
- name: name,
- path: resp.children[i].path,
- leftAggs: left.aggs,
- rightAggs: right.aggs,
- });
-
- currStep.push(name);
- let stepDiff = right.total_duration - left.total_duration;
- currStep.push(stepDiff);
-
- accumulatedStepDiff += stepDiff;
- currStep.push(accumulatedStepDiff);
-
- newStepChartData.push(currStep);
- }
- } else {
- let left = resp.left;
- let right = resp.right;
- let currColumn: any[] = [];
- let currStep: any[] = [];
- let name = left.name;
-
- if (name.startsWith('nn.Module: ')) {
- name = name.substring(11);
- }
-
- currColumn.push(name);
- currColumn.push(left.total_duration);
- currColumn.push(right.total_duration);
- currColumn.push(left.total_duration);
- currColumn.push(right.total_duration);
-
- newColumnChartData.push(currColumn);
-
- currStep.push(name);
- let stepDiff = right.total_duration - left.total_duration;
- currStep.push(stepDiff);
- currStep.push(stepDiff);
- newStepChartData.push(currStep);
- }
-
- setColumnChartData(newColumnChartData);
- columnChartDataStack.push(newColumnChartData);
-
- setStepChartData(newStepChartData);
- stepChartDataStack.push(newStepChartData);
-
- setColumnUnderlyingData(underlyingData);
- columnUnderlyingDataStack.push(underlyingData);
-
- setDataStackLevel(columnChartDataStack.length);
- }; // #endregion
-
- if (!loading && columnUnderlyingDataStack.length === 0) {
- return (
-
-
- There is no run selected for diff.
-
-
- );
- }
-
- if (loading) {
- return
-
-
-
-
-
- No more level to show. }
-
-
-
-
-
-
-
-
-
-
- Host Duration
-
-
- Self Host Duration
-
-
- Device Duration
-
-
- Self Device Duration
-
-
-
-
-
-
-
-
-
-
= (props) => {
- const tooltipCommonClasses = useTooltipCommonStyles();
- const chartHeaderRenderer = React.useMemo(
- () => makeChartHeaderRenderer(tooltipCommonClasses),
- [tooltipCommonClasses]
- );
-
- let { run, worker, span } = props;
- const classes = useStyles();
-
- const [overlapGraph, setOverlapGraph] = React.useState(undefined);
- const [waittimeGraph, setWaittimeGraph] = React.useState(undefined);
- const [commopsTableData, setCommopsTableData] = React.useState(undefined);
- const [gpuInfo, setGpuInfo] = React.useState(undefined);
- const [commopsTableTitle, setCommopsTableTitle] = React.useState('');
- const [commopsWorkers, setCommopsWorkers] = React.useState([]);
- const [overlapSteps, setOverlapSteps] = React.useState([]);
- const [waittimeSteps, setWaittimeSteps] = React.useState([]);
- const [overlapStep, setOverlapStep] = React.useState('');
- const [waittimeStep, setWaittimeStep] = React.useState('');
- const [commopsWorker, setCommopsWorker] = React.useState('');
- const [columns, setColumns] = React.useState>([]);
- const [pageSize, setPageSize] = React.useState(30);
-
- React.useEffect(() => {
- if (waittimeSteps.includes('all')) {
- setWaittimeStep('all');
- } else {
- setWaittimeStep(firstOrUndefined(waittimeSteps) ?? '');
- }
- }, [waittimeSteps]);
-
- React.useEffect(() => {
- if (overlapSteps.includes('all')) {
- setOverlapStep('all');
- } else {
- setOverlapStep(firstOrUndefined(overlapSteps) ?? '');
- }
- }, [overlapSteps]);
-
- React.useEffect(() => {
- setCommopsWorker(firstOrUndefined(commopsWorkers) ?? '');
- }, [commopsWorkers]);
-
- React.useEffect(() => {
- api.defaultApi.distributedOverlapGet(run, 'All', span).then((resp) => {
- setOverlapGraph(resp);
- setOverlapSteps(Object.keys(resp.data));
- });
- api.defaultApi.distributedWaittimeGet(run, 'All', span).then((resp) => {
- setWaittimeGraph(resp);
- setWaittimeSteps(Object.keys(resp.data));
- });
- api.defaultApi.distributedCommopsGet(run, 'All', span).then((resp) => {
- setCommopsTableData(resp.data);
- setCommopsWorkers(Object.keys(resp.data));
- setCommopsTableTitle(resp.metadata.title);
- });
- api.defaultApi.distributedGpuinfoGet(run, 'All', span).then((resp) => {
- setGpuInfo(resp);
- });
- }, [run, worker, span]);
-
- const onCommopsWorkerChanged: SelectProps['onChange'] = (event) => {
- setCommopsWorker(event.target.value as string);
- };
-
- const onOverlapStepChanged: SelectProps['onChange'] = (event) => {
- setOverlapStep(event.target.value as string);
- };
-
- const onWaittimeStepChanged: SelectProps['onChange'] = (event) => {
- setWaittimeStep(event.target.value as string);
- };
-
- const getColumnChartData = (distributedGraph?: DistributedGraph, step?: string): any => {
- if (!distributedGraph || !step) {
- return undefined;
- }
- const barLabels = Object.keys(distributedGraph.data[step]);
- return {
- legends: distributedGraph.metadata.legends,
- barLabels,
- barHeights: barLabels.map((label) => distributedGraph.data[step][label]),
- };
- };
- const overlapData = React.useMemo(() => getColumnChartData(overlapGraph, overlapStep), [overlapGraph, overlapStep]);
- const waittimeData = React.useMemo(
- () => getColumnChartData(waittimeGraph, waittimeStep),
- [waittimeGraph, waittimeStep]
- );
-
- const getTableData = (tableData?: any, opsWorker?: string): any[] => {
- if (!tableData || !opsWorker) {
- return [];
- }
- let dataInfo: api.Graph = tableData[opsWorker];
- const stringCompare = (a: string, b: string): number => a.localeCompare(b);
- const numberCompare = (a: number, b: number): number => a - b;
- let column: any[] = dataInfo.columns.map((item) => {
- return {
- title: item.name,
- key: item.name,
- dataIndex: item.name,
- sorter:
- item.type === 'string'
- ? (a: any, b: any): number => stringCompare(a[item.name], b[item.name])
- : (a: any, b: any): number => numberCompare(a[item.name], b[item.name]),
- };
- });
- setColumns(column);
- return dataInfo.rows.map((row, index) => {
- if (row.length !== dataInfo.columns.length) {
- return null;
- }
- const dataRow: { [column: string]: number | string } = { key: index };
- dataInfo.columns.forEach((item, idx) => {
- dataRow[item.name] = row[idx] as string | number;
- });
- return dataRow;
- });
- };
- const commopsTable: any[] = React.useMemo(() => {
- return getTableData(commopsTableData, commopsWorker);
- }, [commopsTableData, commopsWorker]);
-
- const onShowSizeChange = (current: number, size: number): void => {
- setPageSize(size);
- };
-
- return (
-
-
-
-
- {gpuInfo && (
-
-
-
-
-
-
- )}
-
-
- {(chartData): JSX.Element => (
-
-
-
-
- Step
-
-
-
- {overlapSteps.map((step) => (
- {step}
- ))}
-
-
-
-
- {overlapGraph?.metadata?.title && (
-
- )}
-
-
-
-
- {(chartData): JSX.Element => (
-
-
-
-
- Step
-
-
-
- {waittimeSteps.map((step) => (
- {step}
- ))}
-
-
-
-
- {waittimeGraph?.metadata?.title && (
-
- )}
-
-
-
-
-
-
-
-
- Worker
-
-
-
- {commopsWorkers.map((item) => (
- {item}
- ))}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- );
-};
diff --git a/plugins/tensorboard-plugins/tb_plugin/fe/src/components/GpuInfoTable.tsx b/plugins/tensorboard-plugins/tb_plugin/fe/src/components/GpuInfoTable.tsx
deleted file mode 100644
index 07f6f1d78c88abab5f62f844356b47ca517a2561..0000000000000000000000000000000000000000
--- a/plugins/tensorboard-plugins/tb_plugin/fe/src/components/GpuInfoTable.tsx
+++ /dev/null
@@ -1,130 +0,0 @@
-/*---------------------------------------------------------------------------------------------
- * Copyright (c) Microsoft Corporation. All rights reserved.
- *--------------------------------------------------------------------------------------------*/
-
-import { makeStyles } from '@material-ui/core/styles';
-import * as React from 'react';
-
-export interface IProps {
- gpuInfo: any;
-}
-
-const useStyles = makeStyles((theme) => ({
- root: {
- border: '1px solid #E0E0E0',
- borderCollapse: 'collapse',
- width: '100%',
- },
- td: {
- borderTop: '1px solid #E0E0E0',
- borderBottom: '1px solid #E0E0E0',
- borderCollapse: 'collapse',
- paddingLeft: 10,
- paddingRight: 10,
- },
- nodeTd: {
- fontWeight: 'bold',
- },
- pidTd: {
- fontWeight: 'normal',
- },
- gpuTd: {
- fontWeight: 'normal',
- },
- keyTd: {
- fontWeight: 'normal',
- textAlign: 'right',
- },
- valueTd: {
- fontWeight: 'bold',
- },
-}));
-
-interface TableCellInfo {
- content: string;
- rowspan: number;
- cellType: 'node' | 'pid' | 'gpu' | 'key' | 'value';
- last?: boolean;
-}
-
-function makeTableCellInfo(gpuInfo: any): TableCellInfo[][] {
- const rows: TableCellInfo[][] = [];
- let currRow: TableCellInfo[] = [];
- rows.push(currRow);
- Object.keys(gpuInfo.data).forEach((nodeName) => {
- const nodeCell = {
- content: nodeName,
- rowspan: 0,
- cellType: 'node' as const,
- };
- const i = rows.length;
- currRow.push(nodeCell);
- Object.keys(gpuInfo.data[nodeName]).forEach((pid) => {
- const pidCell = { content: pid, rowspan: 0, cellType: 'pid' as const };
- const j = rows.length;
- currRow.push(pidCell);
- Object.keys(gpuInfo.data[nodeName][pid]).forEach((gpu) => {
- const gpuCell = { content: gpu, rowspan: 0, cellType: 'gpu' as const };
- const k = rows.length;
- currRow.push(gpuCell);
- Object.keys(gpuInfo.data[nodeName][pid][gpu]).forEach((keyName) => {
- currRow.push({
- content: keyName,
- rowspan: 1,
- cellType: 'key' as const,
- });
- const value: string = gpuInfo.data[nodeName][pid][gpu][keyName];
- currRow.push({
- content: value,
- rowspan: 1,
- cellType: 'value' as const,
- });
- currRow = [];
- rows.push(currRow);
- });
- gpuCell.rowspan = rows.length - k;
- });
- pidCell.rowspan = rows.length - j;
- });
- nodeCell.rowspan = rows.length - i;
- });
- rows.pop();
- return rows;
-}
-
-export const GpuInfoTable: React.FC = (props) => {
- const classes = useStyles();
- interface TableCellInfoNoLast {
- content: string;
- rowspan: number;
- cellType: 'node' | 'pid' | 'gpu' | 'key' | 'value';
- }
-
- const rows = React.useMemo(() => makeTableCellInfo(props.gpuInfo), [props.gpuInfo]);
-
- const cellToClass = {
- node: classes.nodeTd,
- pid: classes.pidTd,
- gpu: classes.gpuTd,
- key: classes.keyTd,
- value: classes.valueTd,
- };
-
- const renderCell = function (info: TableCellInfoNoLast): JSX.Element {
- let cellClass = cellToClass[info.cellType];
- let content = info.cellType === 'key' ? `${info.content}:` : info.content;
- return (
-
- {content}
-
- );
- };
-
- return (
-
- {rows.map((row) => (
- {row.map(renderCell)}
- ))}
-
- );
-};
diff --git a/plugins/tensorboard-plugins/tb_plugin/fe/src/components/Kernel.tsx b/plugins/tensorboard-plugins/tb_plugin/fe/src/components/Kernel.tsx
deleted file mode 100644
index 66e05695153a853f68d382a2f3b6a68931861abf..0000000000000000000000000000000000000000
--- a/plugins/tensorboard-plugins/tb_plugin/fe/src/components/Kernel.tsx
+++ /dev/null
@@ -1,301 +0,0 @@
-/*---------------------------------------------------------------------------------------------
- * Copyright (c) Microsoft Corporation. All rights reserved.
- *--------------------------------------------------------------------------------------------
- * Copyright (c) 2023, Huawei Technologies.
- * All rights reserved.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- * Modifications: Add visualization of PyTorch Ascend profiling.
- *--------------------------------------------------------------------------------------------*/
-
-import Card from '@material-ui/core/Card';
-import CardContent from '@material-ui/core/CardContent';
-import CardHeader from '@material-ui/core/CardHeader';
-import FormControlLabel from '@material-ui/core/FormControlLabel';
-import Grid from '@material-ui/core/Grid';
-import InputLabel from '@material-ui/core/InputLabel';
-import MenuItem from '@material-ui/core/MenuItem';
-import Radio from '@material-ui/core/Radio';
-import RadioGroup, { RadioGroupProps } from '@material-ui/core/RadioGroup';
-import Select, { SelectProps } from '@material-ui/core/Select';
-import { makeStyles } from '@material-ui/core/styles';
-import TextField, { StandardTextFieldProps, TextFieldProps } from '@material-ui/core/TextField';
-import * as React from 'react';
-import * as api from '../api';
-import { Graph } from '../api';
-import { KernelGroupBy } from '../constants/groupBy';
-import { useSearch } from '../utils/search';
-import { topIsValid, UseTop, useTopN } from '../utils/top';
-import { AntTableChart } from './charts/AntTableChart';
-import { PieChart } from './charts/PieChart';
-import { DataLoading } from './DataLoading';
-import { makeChartHeaderRenderer, useTooltipCommonStyles } from './helpers';
-import {
- gpuKernelTotalTimeTooltip,
- tensorCoresPieChartTooltip,
- tensorCoresPieChartTooltipAscend,
-} from './TooltipDescriptions';
-
-export interface IProps {
- run: string;
- worker: string;
- span: string;
- deviceTarget: string;
-}
-
-const useStyles = makeStyles((theme) => ({
- root: {
- flexGrow: 1,
- },
- verticalInput: {
- display: 'flex',
- alignItems: 'center',
- },
- inputWidth: {
- width: '4em',
- },
- inputWidthOverflow: {
- minWidth: '15em',
- whiteSpace: 'nowrap',
- },
- description: {
- marginLeft: theme.spacing(1),
- },
-}));
-
-export const Kernel: React.FC = (props) => {
- const { run, worker, span, deviceTarget } = props;
- const classes = useStyles();
- const tooltipCommonClasses = useTooltipCommonStyles();
- const chartHeaderRenderer = React.useMemo(
- () => makeChartHeaderRenderer(tooltipCommonClasses),
- [tooltipCommonClasses]
- );
-
- const [kernelGraph, setKernelGraph] = React.useState(undefined);
- const [tcGraph, setTcGraph] = React.useState(undefined);
- const [kernelTable, setKernelTable] = React.useState(undefined);
- const [groupBy, setGroupBy] = React.useState(KernelGroupBy.KERNEL);
- const [searchKernelName, setSearchKernelName] = React.useState('');
- const [searchOpName, setSearchOpName] = React.useState('');
- const [sortColumn, setSortColumn] = React.useState('');
- const [hasStep, setHasStep] = React.useState(false);
-
- const [topText, actualTop, useTop, setTopText, setUseTop] = useTopN({
- defaultUseTop: UseTop.USE,
- defaultTop: 10,
- });
-
- React.useEffect(() => {
- setSearchOpName('');
- }, [groupBy]);
-
- React.useEffect(() => {
- if (kernelGraph) {
- setTopText(String(Math.min(kernelGraph.rows?.length, 10)));
- }
- }, [kernelGraph]);
-
- React.useEffect(() => {
- api.defaultApi.kernelTableGet(run, worker, span, groupBy).then((resp) => {
- setSortColumn(resp.metadata.sort);
- setKernelTable(resp.data);
- const nameColumnIdx = resp.data.columns.findIndex((c) => c.name.toLowerCase() === 'step id');
- setHasStep(nameColumnIdx > -1);
- });
- }, [run, worker, span, groupBy]);
-
- React.useEffect(() => {
- api.defaultApi.kernelGet(run, worker, span, KernelGroupBy.KERNEL).then((resp) => {
- setKernelGraph(resp.total);
- setGroupBy(resp.device_target === 'Ascend' ? KernelGroupBy.KERNEL_NAME_AND_OP_NAME : KernelGroupBy.KERNEL);
- });
- }, [run, worker, span]);
-
- React.useEffect(() => {
- api.defaultApi.kernelTcPieGet(run, worker, span).then((resp) => {
- setTcGraph(resp.total);
- });
- }, [run, worker, span]);
-
- const [searchedKernelTable] = useSearch(searchKernelName, 'name', kernelTable);
- const [searchedOpTable] = useSearch(
- searchOpName,
- deviceTarget === 'Ascend' ? 'step id' : 'operator',
- searchedKernelTable
- );
-
- const onGroupByChanged: SelectProps['onChange'] = (event) => {
- setGroupBy(event.target.value as KernelGroupBy);
- };
-
- const onSearchKernelChanged: TextFieldProps['onChange'] = (event) => {
- setSearchKernelName(event.target.value as string);
- };
-
- const onSearchOpChanged: TextFieldProps['onChange'] = (event) => {
- setSearchOpName(event.target.value as string);
- };
-
- const onUseTopChanged: RadioGroupProps['onChange'] = (event) => {
- setUseTop(event.target.value as UseTop);
- };
-
- const onTopChanged = (event: React.ChangeEvent): void => {
- setTopText(event.target.value);
- };
-
- const inputProps: StandardTextFieldProps['inputProps'] = {
- min: 1,
- };
-
- const GPUKernelTotalTimeTitle = React.useMemo(
- () => chartHeaderRenderer('Total Time (us)', gpuKernelTotalTimeTooltip),
- [chartHeaderRenderer]
- );
-
- const TensorCoresTitle = React.useMemo(
- () =>
- deviceTarget === 'Ascend'
- ? chartHeaderRenderer('Accelerator Core Utilization', tensorCoresPieChartTooltipAscend)
- : chartHeaderRenderer('Tensor Cores Utilization', tensorCoresPieChartTooltip),
- [chartHeaderRenderer, deviceTarget]
- );
-
- return (
-
-
-
-
-
-
-
-
-
- {useTop === UseTop.USE && (
-
-
- )}
-
-
-
- {(graph): JSX.Element => (
-
-
- )}
-
-
-
-
- {(graph): JSX.Element => (
-
-
- )}
-
-
-
-
-
-
- Group By
-
-
- {deviceTarget === 'Ascend' ? 'Statistic' : 'Kernel Properties + Op Name'}
-
-
- {deviceTarget === 'Ascend' ? 'All' : 'Kernel Name'}
-
-
-
-
-
-
-
- {deviceTarget === 'Ascend'
- ? groupBy === KernelGroupBy.KERNEL &&
- hasStep && (
-
-
- )
- : groupBy === KernelGroupBy.KERNEL_NAME_AND_OP_NAME && (
-
-
- )}
-
-
-
-
-
- {(graph): JSX.Element =>
-
-
-
-
-
-
-
= React.memo((props) => {
- interface EventSizeFilter {
- [deviceName: string]: Array;
- }
-
- interface MaxEventSize {
- [deviceName: string]: number;
- }
-
- const { run, worker, span, deviceTarget } = props;
- const classes = useStyles();
-
- const [memoryStatsData, setMemoryStatsData] = React.useState(undefined);
-
- // for backward compatability, old profile do not have events to show
- const showEvents = (): boolean | undefined => {
- return memoryEventsData && Object.keys(memoryEventsData.rows).length !== 0;
- };
- const [memoryEventsData, setMemoryEventsData] = React.useState(undefined);
-
- // for backward compatability, old profile do not have curve to show
- const showCurve = (): boolean | undefined => {
- return memoryCurveData && Object.keys(memoryCurveData.rows).length !== 0;
- };
- const [memoryCurveData, setMemoryCurveData] = React.useState(
- undefined
- );
-
- const [lineChartData, setLineChartData] = React.useState(undefined);
-
- const [devices, setDevices] = React.useState([]);
- const [device, setDevice] = React.useState('');
- const [tag, setTag] = React.useState('Operator');
- const memoryCurveDataAllRef = React.useRef(undefined);
- const memoryEventDataAllRef = React.useRef(undefined);
-
- interface SelectedRange {
- start: number;
- end: number;
- startTs: number;
- endTs: number;
- }
- const [selectedRange, setSelectedRange] = React.useState();
- const [searchOperatorName, setSearchOperatorName] = React.useState('');
- const [searchEventOperatorName, setSearchEventOperatorName] = React.useState('');
- const [filterEventSize, setFilterEventSize] = React.useState({});
- const [maxSize, setMaxSize] = React.useState({});
-
- const getSearchIndex = function (): number {
- if (!memoryStatsData) {
- return -1;
- }
- for (let i = 0; i < memoryStatsData.columns.length; i++) {
- if (memoryStatsData.columns[i].name === memoryStatsData.metadata.search) {
- return i;
- }
- }
- return -1;
- };
-
- const getStep = (size: number, indexBias: number): number => {
- return 10 ** (Math.floor(Math.log10(size !== 0 ? size : 1)) - indexBias);
- };
-
- const filterByEventSize = (rows: T[] | undefined, size: Array): T[] | undefined => {
- const result = React.useMemo(() => {
- if (!rows) {
- return undefined;
- }
-
- // workaround type system
- const field = (row: any): number => {
- const sizeColIndex = 1;
- return row[sizeColIndex];
- };
-
- return rows.filter((row) => {
- return field(row) >= size[0] && field(row) <= size[1];
- });
- }, [rows, size]);
-
- return result;
- };
-
- const searchIndex = getSearchIndex();
- const getName = React.useCallback((row: any) => row[searchIndex], [searchIndex]);
- const getNameAscend = (row: any): any => row[0];
- const [searchedTableDataRows] = useSearchDirectly(searchOperatorName, getName, memoryStatsData?.rows[device] ?? []);
- const [searchedEventsTableDataRows] = useSearchDirectly(
- searchEventOperatorName,
- deviceTarget === 'Ascend' ? getNameAscend : getName,
- filterByEventSize(memoryEventsData?.rows[device], filterEventSize[device] ?? [0, Infinity]) ?? []
- );
-
- const onSearchOperatorChanged: TextFieldProps['onChange'] = (event) => {
- setSearchOperatorName(event.target.value as string);
- };
-
- const onSearchEventOperatorChanged: TextFieldProps['onChange'] = (event) => {
- setSearchEventOperatorName(event.target.value as string);
- };
-
- const [selectedRecord, setSelectedRecord] = React.useState();
- const onRowSelected = (record?: object, rowIndex?: number): void => {
- setSelectedRecord(record);
- };
-
- const onFilterEventSizeChanged = (event: any, newValue: number | number[]): void => {
- setFilterEventSize({
- ...filterEventSize,
- [device]: newValue as number[],
- });
- };
-
- const onFilterEventMinSizeInputChanged = (event: React.ChangeEvent): void => {
- setFilterEventSize({
- ...filterEventSize,
- [device]: [Number(event.target.value), filterEventSize[device][1]],
- });
- };
-
- const onFilterEventMaxSizeInputChanged = (event: React.ChangeEvent): void => {
- setFilterEventSize({
- ...filterEventSize,
- [device]: [filterEventSize[device][0], Number(event.target.value)],
- });
- };
-
- React.useEffect(() => {
- if (deviceTarget !== 'Ascend') {
- api.defaultApi.memoryGet(run, worker, span, selectedRange?.startTs, selectedRange?.endTs).then((resp) => {
- setMemoryStatsData(resp);
- if (!devices || devices.length === 0) {
- // setDevices only execute on view load. Since selection on curve
- // might filter all events later, some devices might is missing.
- setDevices(Object.keys(resp.rows));
- setDevice(resp.metadata.default_device);
- }
- });
- }
- }, [run, worker, span, selectedRange]);
-
- React.useEffect(() => {
- api.defaultApi.memoryEventsGet(run, worker, span, selectedRange?.startTs, selectedRange?.endTs).then((resp) => {
- const tempRes = deviceTarget === 'Ascend' ? (resp as MemoryEventsDataAll).operator : (resp as MemoryEventsData);
- if (deviceTarget === 'Ascend') {
- memoryEventDataAllRef.current = resp as MemoryEventsDataAll;
- }
- let curMaxSize: MaxEventSize = {};
- let curFilterEventSize: EventSizeFilter = {};
- Object.keys(tempRes.rows).forEach((deviceName) => {
- curMaxSize[deviceName] = 0;
- for (let i = 0; i < tempRes.rows[deviceName].length; i++) {
- curMaxSize[deviceName] = Math.max(curMaxSize[deviceName], tempRes.rows[deviceName][i][1]);
- }
- curFilterEventSize[deviceName] = [curMaxSize[deviceName] / 4, curMaxSize[deviceName]];
- curMaxSize[deviceName] = curMaxSize[deviceName];
- });
- setMaxSize(curMaxSize);
- setFilterEventSize(curFilterEventSize);
- setMemoryEventsData(tempRes);
- });
- }, [run, worker, span, selectedRange]);
-
- React.useEffect(() => {
- api.defaultApi.memoryCurveGet(run, worker, span).then((resp) => {
- // Reset the select range to null whenever run/worker/span changes
- setSelectedRange(undefined);
- if (deviceTarget === 'Ascend') {
- const allCurveData = resp as MemoryCurveDataAll;
- memoryCurveDataAllRef.current = allCurveData;
- setDevice(allCurveData.default_device);
- setDevices(allCurveData.devices);
- setMemoryCurveData(allCurveData.total);
- setTag('Operator');
- } else {
- setMemoryCurveData(resp as MemoryCurveData);
- }
- });
- }, [run, worker, span]);
-
- React.useEffect(() => {
- if (memoryCurveData !== undefined) {
- if (deviceTarget === 'Ascend') {
- setLineChartData({
- title: memoryCurveData.metadata.peaks[device] ?? '',
- columns: memoryCurveData.columns[device] ?? [],
- rows: memoryCurveData.rows[device] ?? {},
- });
- } else {
- setLineChartData({
- title: memoryCurveData.metadata.peaks[device],
- columns: memoryCurveData.columns,
- rows: memoryCurveData.rows[device] ?? [],
- });
- }
- }
- }, [memoryCurveData, device]);
-
- const onDeviceChanged: SelectProps['onChange'] = (event) => {
- setDevice(event.target.value as string);
- setSelectedRange(undefined);
- };
-
- const onTagChanged: SelectProps['onChange'] = (event) => {
- setTag(event.target.value as string);
- if (event.target.value === 'Operator') {
- setMemoryCurveData(memoryCurveDataAllRef.current?.total);
- setMemoryEventsData(memoryEventDataAllRef.current?.operator);
- setSelectedRange(undefined);
- } else {
- setMemoryCurveData(memoryCurveDataAllRef.current?.ptaGe);
- setMemoryEventsData(memoryEventDataAllRef.current?.component);
- }
- };
-
- const onSelectedRangeChanged = (start: number, end: number): void => {
- if (start > end) {
- setSelectedRange(undefined);
- return;
- }
-
- let allDatas = deviceTarget === 'Ascend' ? memoryCurveData?.rows[device]?.Allocated : memoryCurveData?.rows[device];
- if (allDatas.length <= 1) {
- setSelectedRange(undefined);
- return;
- }
-
- let startTs = 0;
- let endTs = 0;
- let realStart = 0;
- let realEnd = 0;
- let startId = 1;
- let endId = 0;
- let needLoopStart = true;
- for (let i = 1; i < allDatas.length; i++) {
- if (startId > start && needLoopStart) {
- needLoopStart = false;
- realStart = i - 1;
- }
- if (allDatas[i][0] !== allDatas[i - 1][0]) {
- if (startId <= start) {
- startId += 1;
- }
- endId += 1;
- }
- if (endId > end) {
- realEnd = i - 1;
- break;
- } else {
- realEnd = i;
- if (needLoopStart) {
- realStart = i;
- }
- }
- }
-
- if (deviceTarget === 'Ascend') {
- startTs = allDatas[realStart][0];
- endTs = allDatas[realEnd][0];
- } else {
- let bias = memoryCurveData?.metadata.first_ts ?? 0;
- let scale = 1 / (memoryCurveData?.metadata.time_factor ?? 1);
- startTs = Math.round((allDatas[realStart][0] * scale) + bias);
- endTs = Math.round((allDatas[realEnd][0] * scale) + bias);
- }
-
- setSelectedRange({ start, end, startTs, endTs });
- };
-
- return (
-
-
-
-
-
-
- {(graph): JSX.Element => (
-
-
-
- Device
-
- {devices.map((item) => (
- {item}
- ))}
-
-
- {deviceTarget === 'Ascend' && (
-
- Group By
-
- {tags.map((item) => (
- {item}
- ))}
-
-
- )}
-
- {showCurve() && lineChartData && lineChartData.columns.length > 0 && (
-
-
-
-
- )}
-
- )}
-
-
- {showEvents() && (
- <>
- {(deviceTarget !== 'Ascend' || tag === 'Operator') && (
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- )}
-
-
- {(data): JSX.Element => {
- return (
-
-
-
- )}
- {deviceTarget !== 'Ascend' && (
- <>
-
-
-
-
-
-
- {(data): JSX.Element => (
-
-
-
- )}
-
-
-
-
= (props) => {
- const { run, worker, span } = props;
- const classes = useStyles();
-
- const [moduleView, setModuleView] = React.useState(undefined);
- const [flameData, setFlameData] = React.useState([]);
- const [flameHeight, setFlameHeight] = React.useState(0);
- const [modules, setModules] = React.useState([]);
- const [module, setModule] = React.useState(0);
-
- const [columns, setColumns] = React.useState([]);
- const [rows, setRows] = React.useState([]);
-
- const cardRef = React.useRef(null);
- const [cardWidth, setCardWidth] = React.useState(undefined);
- const timelineRef = React.useRef(null);
-
- React.useEffect(() => {
- defaultApi
- .moduleGet(run, worker, span)
- .then((resp) => {
- setModuleView(resp);
- if (resp) {
- // set the flamegraph data
- const flameGraphData: any[] = getFlameGraphData(resp.data);
- setFlameData(flameGraphData);
- const flameGraphHeight = Math.max(...flameGraphData.map((x) => getTreeHeight(x)));
- setFlameHeight(flameGraphHeight * 25);
- setModules(Array.from(Array(flameGraphData.length).keys()));
- setModule(0);
-
- // set the tree table data
- setColumns(getKeyedTableColumns(resp.columns));
- setRows(getTableRows(1, resp.data));
- }
- })
- .catch((e) => {
- if (e.status === 404) {
- setModules([]);
- setFlameData([]);
- setRows([]);
- }
- });
-
- if (cardRef.current) {
- setCardWidth(cardRef.current.offsetWidth - 10);
- }
- try {
- if (timelineRef.current) {
- defaultApi.treeGet(run, worker, span).then((resp) => {
- if (resp) {
- const data = new google.visualization.DataTable();
- data.addColumn({ type: 'string', id: 'Layer' });
- data.addColumn({ type: 'string', id: 'Name' });
- data.addColumn({ type: 'string', role: 'tooltip' });
- data.addColumn({ type: 'number', id: 'Start' });
- data.addColumn({ type: 'number', id: 'End' });
-
- let timelineData: any[] = [];
- getOperatorTree(0, resp, timelineData);
- timelineData.sort((a, b) => a.level - b.level);
- const maxLevel = timelineData[timelineData.length - 1].level;
- timelineData.forEach((d) => {
- data.addRow([
- d.level.toString(),
- d.name,
- `${d.name} Duration: ${d.end - d.start} us`,
- d.start / 1000.0, // the time unit is us returned from server, but the google charts only accept milliseconds here
- d.end / 1000.0,
- ]);
- });
-
- const chart = new google.visualization.Timeline(timelineRef.current);
- const options = {
- height: (maxLevel + 1) * 50,
- tooltip: {
- isHtml: true,
- },
- timeline: {
- showRowLabels: false,
- },
- };
- chart.draw(data, options);
- }
- });
- }
- } catch (e) {
- message.warning('Timeline in module view is not supported offline.');
- }
- }, [run, worker, span]);
-
- const handleModuleChange: SelectProps['onChange'] = (event) => {
- setModule(event.target.value as number);
- };
-
- const moduleComponent = (): JSX.Element => {
- const moduleFragment = (
-
- Module
-
- {modules.map((m) => (
- {m}
- ))}
-
-
- );
-
- if (!modules || modules.length <= 1) {
- return {moduleFragment}
;
- } else {
- return moduleFragment;
- }
- };
-
- return (
-
-
- {}}
- />
- )}
-
-
-
-
= (props) => {
- const { run, worker, span, deviceTarget } = props;
- const classes = useStyles();
- const tooltipCommonClasses = useTooltipCommonStyles();
- const chartHeaderRenderer = React.useMemo(
- () => makeChartHeaderRenderer(tooltipCommonClasses),
- [tooltipCommonClasses]
- );
-
- const [operatorGraph, setOperatorGraph] = React.useState(undefined);
- const [operatorTable, setOperatorTable] = React.useState(undefined);
- const [sortColumn, setSortColumn] = React.useState('');
- const [tableTooltips, setTableTooltips] = React.useState(undefined);
- const [groupBy, setGroupBy] = React.useState(OperationGroupBy.OPERATION);
- const [searchOperatorName, setSearchOperatorName] = React.useState('');
- const [topText, actualTop, useTop, setTopText, setUseTop] = useTopN({
- defaultUseTop: UseTop.USE,
- defaultTop: 10,
- });
-
- const getName = React.useCallback((row: OperationTableDataInner) => row.name, []);
- const [searchedOperatorTable] = useSearchDirectly(searchOperatorName, getName, operatorTable);
-
- const onSearchOperatorChanged: TextFieldProps['onChange'] = (event) => {
- setSearchOperatorName(event.target.value as string);
- };
-
- React.useEffect(() => {
- if (operatorGraph) {
- const counts = [
- operatorGraph.device_self_time?.rows.length ?? 0,
- operatorGraph.device_total_time?.rows.length ?? 0,
- operatorGraph.host_self_time.rows?.length ?? 0,
- operatorGraph.host_total_time.rows?.length ?? 0,
- ];
- setTopText(String(Math.min(Math.max(...counts), 10)));
- }
- }, [operatorGraph]);
-
- React.useEffect(() => {
- api.defaultApi.operationTableGet(run, worker, span, groupBy).then((resp) => {
- setSortColumn(resp.metadata.sort);
- setTableTooltips(resp.metadata.tooltips);
- setOperatorTable(resp.data);
- });
- }, [run, worker, span, groupBy]);
-
- React.useEffect(() => {
- api.defaultApi.operationGet(run, worker, span, groupBy).then((resp) => {
- setOperatorGraph(resp);
- });
- }, [run, worker, span, groupBy]);
-
- const onGroupByChanged: SelectProps['onChange'] = (event) => {
- setGroupBy(event.target.value as OperationGroupBy);
- };
-
- const onUseTopChanged: RadioGroupProps['onChange'] = (event) => {
- setUseTop(event.target.value as UseTop);
- };
-
- const onTopChanged = (event: React.ChangeEvent): void => {
- setTopText(event.target.value);
- };
-
- const inputProps: StandardTextFieldProps['inputProps'] = {
- min: 1,
- };
-
- const renderCharts = (graph: api.OperatorGraph): JSX.Element => {
- return (
-
- {graph.device_self_time && (
-
-
- {graph.device_self_time.title && (
-
-
- )}
- {graph.device_total_time && (
-
-
- {graph.device_total_time.title && (
-
-
- )}
-
-
- {graph.host_self_time.title && (
-
-
-
-
- {graph.host_total_time.title && (
-
-
-
- );
- };
-
- return (
-
-
-
-
-
-
-
-
-
- {useTop === UseTop.USE && (
-
-
- )}
-
-
- {renderCharts}
-
-
-
-
-
- Group By
-
- Operator + Input Shape
- Operator
-
-
-
-
-
-
-
-
- {(table): JSX.Element => (
-
-
-
-
-
-
-
- );
-};
diff --git a/plugins/tensorboard-plugins/tb_plugin/fe/src/components/Overview.tsx b/plugins/tensorboard-plugins/tb_plugin/fe/src/components/Overview.tsx
deleted file mode 100644
index 6a81c567bc5e44b1dd6eb4746135d61268cadb81..0000000000000000000000000000000000000000
--- a/plugins/tensorboard-plugins/tb_plugin/fe/src/components/Overview.tsx
+++ /dev/null
@@ -1,225 +0,0 @@
-/*---------------------------------------------------------------------------------------------
- * Copyright (c) Microsoft Corporation. All rights reserved.
- *--------------------------------------------------------------------------------------------*/
-
-import Card from '@material-ui/core/Card';
-import CardContent from '@material-ui/core/CardContent';
-import CardHeader from '@material-ui/core/CardHeader';
-import Grid from '@material-ui/core/Grid';
-import { makeStyles } from '@material-ui/core/styles';
-import { Table } from 'antd';
-import { ColumnsType } from 'antd/es/table';
-import * as React from 'react';
-import * as api from '../api';
-import { PieChart } from './charts/PieChart';
-import { SteppedAreaChart } from './charts/SteppedAreaChart';
-import { DataLoading } from './DataLoading';
-import { makeChartHeaderRenderer, useTooltipCommonStyles } from './helpers';
-import { TextListItem } from './TextListItem';
-import { stepTimeBreakDownTooltip } from './TooltipDescriptions';
-import { transformPerformanceIntoPie, transformPerformanceIntoTable } from './transform';
-
-const topGraphHeight = 230;
-
-const useStyles = makeStyles((theme) => ({
- root: {
- flexGrow: 1,
- },
- pre: {
- '& ul': {
- margin: 0,
- paddingLeft: theme.spacing(3),
- ...theme.typography.body1,
- },
- '& li': {},
- '& a': {
- color: '#ffa726',
- },
- '& a:active': {
- color: '#ffa726',
- },
- '& p': {
- margin: 0,
- ...theme.typography.subtitle1,
- fontWeight: theme.typography.fontWeightBold,
- },
- },
- topGraph: {
- height: topGraphHeight + 40,
- },
- table: {
- height: '100%',
- border: '1px solid #efefef',
- '& .ant-table-tbody > tr': {
- height: 20,
- fontSize: '10pt',
- '& > td': {
- padding: '0 8px!important',
- },
- },
- },
-}));
-
-export interface IProps {
- run: string;
- worker: string;
- span: string;
-}
-
-export const Overview: React.FC = (props) => {
- const { run, worker, span } = props;
-
- const [steps, setSteps] = React.useState(undefined);
- const [performances, setPerformances] = React.useState([]);
- const [environments, setEnvironments] = React.useState([]);
- const [gpuMetrics, setGpuMetrics] = React.useState(undefined);
- const [recommendations, setRecommendations] = React.useState('');
- const [columns, setColumns] = React.useState>([]);
-
- const tableRows = React.useMemo(() => {
- let dataInfo: api.Graph = transformPerformanceIntoTable(performances);
- if (dataInfo.columns.length < 3) {
- return [];
- }
- const stringCompare = (a: string, b: string): number => a.localeCompare(b);
- const numberCompare = (a: number, b: number): number => a - b;
- let column: any[] = dataInfo.columns.map((item) => {
- return {
- title: item.name,
- key: item.name,
- dataIndex: item.name,
- sorter:
- item.type === 'string'
- ? (a: any, b: any): number => stringCompare(a[item.name], b[item.name])
- : (a: any, b: any): number => numberCompare(a[item.name], b[item.name]),
- };
- });
- setColumns(column);
- return dataInfo.rows.map((row, index) => {
- if (row.length < 3) {
- return null;
- }
- return {
- key: index,
- [dataInfo.columns[0].name]: row[0],
- [dataInfo.columns[1].name]: row[1],
- [dataInfo.columns[2].name]: row[2],
- };
- });
- }, [performances]);
-
- const synthesizedPieGraph = React.useMemo(() => {
- return transformPerformanceIntoPie(performances);
- }, [performances]);
-
- React.useEffect(() => {
- api.defaultApi.overviewGet(run, worker, span).then((resp) => {
- setPerformances(resp.performance);
- setEnvironments(resp.environments);
- setSteps(resp.steps);
- setRecommendations(resp.recommendations);
- setGpuMetrics(resp.gpu_metrics);
- });
- }, [run, worker, span]);
-
- const classes = useStyles();
- const tooltipCommonClasses = useTooltipCommonStyles();
- const chartHeaderRenderer = React.useMemo(
- () => makeChartHeaderRenderer(tooltipCommonClasses, false),
- [tooltipCommonClasses]
- );
-
- const stepTimeBreakDownTitle = React.useMemo(
- () => chartHeaderRenderer('Step Time Breakdown', stepTimeBreakDownTooltip),
- [tooltipCommonClasses, chartHeaderRenderer]
- );
-
- const cardSizes = gpuMetrics ? ([2, 3, 7] as const) : ([4, undefined, 8] as const);
-
- return (
-
-
-
-
- {React.useMemo(
- () => (
-
-
- {environments.map((environment) => (
-
-
- ),
- [environments]
- )}
-
- {gpuMetrics && (
-
-
-
- {gpuMetrics.data.map((metric) => (
-
-
-
- )}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- {(graph): JSX.Element => (
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
= (props) => {
- const classes = useStyles();
-
- const getSizes = function (): readonly any[] {
- if (props.value && props.extra) {
- return [4, 4, 4] as const;
- }
- if (props.value) {
- if (props.value.length > props.name.length) {
- return [4, 8, undefined] as const;
- }
- return [8, 4, undefined] as const;
- }
- return [12, undefined, undefined] as const;
- };
-
- const sizes = getSizes();
-
- const renderSpan = function (content: string, className?: string): React.JSX.Element {
- if (props.dangerouslyAllowHtml) {
- return {content} ;
- };
-
- return (
-
-
-
-
- {renderSpan(props.name, props.classes?.name)}
-
- {props.description && {renderSpan(props.description)} }
-
-
- {props.value && (
-
- {renderSpan(props.value)}
-
- )}
- {props.extra && (
-
- {renderSpan(props.extra)}
-
- )}
-
- );
-};
diff --git a/plugins/tensorboard-plugins/tb_plugin/fe/src/components/TooltipDescriptions.ts b/plugins/tensorboard-plugins/tb_plugin/fe/src/components/TooltipDescriptions.ts
deleted file mode 100644
index 6d3631fee97a4dd8da5ebde1550573d8c6e501fa..0000000000000000000000000000000000000000
--- a/plugins/tensorboard-plugins/tb_plugin/fe/src/components/TooltipDescriptions.ts
+++ /dev/null
@@ -1,38 +0,0 @@
-/*---------------------------------------------------------------------------------------------
- * Copyright (c) Microsoft Corporation. All rights reserved.
- *--------------------------------------------------------------------------------------------*/
-
-export const stepTimeBreakDownTooltip = `The time spent on each step is broken down into multiple categories as follows:
-Kernel: Kernels execution time on GPU device;
-Memcpy: GPU involved memory copy time (either D2D, D2H or H2D);
-Memset: GPU involved memory set time;
-Runtime: CUDA runtime execution time on host side; Such as cudaLaunchKernel, cudaMemcpyAsync, cudaStreamSynchronize, ...
-DataLoader: The data loading time spent in PyTorch DataLoader object;
-CPU Exec: Host compute time, including every PyTorch operator running time;
-Other: The time not included in any of the above.`;
-
-export const deviceSelfTimeTooltip = `The accumulated time spent on GPU, not including this operator’s child operators.`;
-
-export const deviceSelfTimeTooltipAscend = `The accumulated time spent on NPU, not including this operator’s child operators.`;
-
-export const deviceTotalTimeTooltip = `The accumulated time spent on GPU, including this operator’s child operators.`;
-
-export const deviceTotalTimeTooltipAscend = `The accumulated time spent on NPU, including this operator’s child operators.`;
-
-export const hostSelfTimeTooltip = `The accumulated time spent on Host, not including this operator’s child operators.`;
-
-export const hostTotalTimeTooltip = `The accumulated time spent on Host, including this operator’s child operators.`;
-
-export const gpuKernelTotalTimeTooltip = `The accumulated time of all calls of this kernel.`;
-
-export const tensorCoresPieChartTooltip = `The accumulated time of all kernels using or not using Tensor Cores.`;
-
-export const tensorCoresPieChartTooltipAscend = `The accumulated time of all kernels group by Accelerator Core.`;
-
-export const distributedGpuInfoTableTooltip = `Information about GPU hardware used during the run.`;
-
-export const distributedOverlapGraphTooltip = `The time spent on computation vs communication.`;
-
-export const distributedWaittimeGraphTooltip = `The time spent waiting vs communicating between devices.`;
-
-export const distributedCommopsTableTooltip = `Statistics for operations managing communications between nodes.`;
diff --git a/plugins/tensorboard-plugins/tb_plugin/fe/src/components/TraceView.tsx b/plugins/tensorboard-plugins/tb_plugin/fe/src/components/TraceView.tsx
deleted file mode 100644
index be499794936a085ed72740eea8bac5f33df37171..0000000000000000000000000000000000000000
--- a/plugins/tensorboard-plugins/tb_plugin/fe/src/components/TraceView.tsx
+++ /dev/null
@@ -1,79 +0,0 @@
-/*---------------------------------------------------------------------------------------------
- * Copyright (c) Microsoft Corporation. All rights reserved.
- *--------------------------------------------------------------------------------------------*/
-
-import ClickAwayListener from '@material-ui/core/ClickAwayListener';
-import { makeStyles } from '@material-ui/core/styles';
-import * as React from 'react';
-import * as api from '../api';
-
-export interface IProps {
- run: string;
- worker: string;
- span: string;
- iframeRef: React.RefObject;
-}
-
-const useStyles = makeStyles(() => ({
- root: {
- flexGrow: 1,
- },
- frame: {
- width: '100%',
- height: 'calc(100vh - 48px)',
- border: 'none',
- },
-}));
-
-export const TraceView: React.FC = (props) => {
- const { run, worker, span, iframeRef } = props;
- const classes = useStyles();
-
- const [traceData, setTraceData] = React.useState | null>(null);
- const [traceViewReady, setTraceViewReady] = React.useState(false);
-
- React.useEffect(() => {
- setTraceData(
- api.defaultApi.traceGet(run, worker, span).then((resp) => {
- return JSON.stringify(resp);
- })
- );
- }, [run, worker, span]);
-
- React.useEffect(() => {
- function callback(event: MessageEvent): void {
- const data = event.data || {};
- if (data.msg === 'ready') {
- setTraceViewReady(true);
- }
- }
-
- window.addEventListener('message', callback);
- return () => {
- window.removeEventListener('message', callback);
- };
- }, []);
-
- React.useEffect(() => {
- if (traceData && traceViewReady) {
- traceData.then((data) => {
- iframeRef.current?.contentWindow?.postMessage({ msg: 'data', data }, window.origin);
- });
- }
- }, [traceData, traceViewReady]);
- const setIframeActive = (): void => {
- iframeRef.current?.focus();
- };
- return (
-
- {React.useMemo(
- () => (
-
-
-
- ),
- []
- )}
-
- );
-};
diff --git a/plugins/tensorboard-plugins/tb_plugin/fe/src/components/charts/AntTableChart.tsx b/plugins/tensorboard-plugins/tb_plugin/fe/src/components/charts/AntTableChart.tsx
deleted file mode 100644
index 83618064b55223ab06d4d1fec8b8b5eeab8d3268..0000000000000000000000000000000000000000
--- a/plugins/tensorboard-plugins/tb_plugin/fe/src/components/charts/AntTableChart.tsx
+++ /dev/null
@@ -1,111 +0,0 @@
-/*---------------------------------------------------------------------------------------------
- * Copyright (c) Microsoft Corporation. All rights reserved.
- *--------------------------------------------------------------------------------------------*/
-
-import { makeStyles } from '@material-ui/core/styles';
-import { Table } from 'antd';
-import * as React from 'react';
-import { Graph } from '../../api';
-
-interface IProps {
- graph: Graph;
- sortColumn?: string;
- initialPageSize?: number;
- onRowSelected?: (record?: object, rowIndex?: number) => void;
-}
-
-const useStyles = makeStyles((theme) => ({
- tooltip: {
- whiteSpace: 'pre-wrap',
- },
- row: {
- wordBreak: 'break-word',
- },
-}));
-
-const getTableColumns = function (columns: any, sort: string | undefined, tooltipClass: string): any {
- let i = 0;
- return columns.map((col: any) => {
- const key = `col${i++}`;
- const stringCompare = (a: any, b: any): number => a[key].localeCompare(b[key]);
- const numberCompare = (a: any, b: any): number => (a[key] || 0) - (b[key] || 0);
- return {
- dataIndex: key,
- key: key,
- title: col.name,
- sorter: col.type === 'string' ? stringCompare : numberCompare,
- defaultSortOrder: sort === col.name ? ('descend' as const) : undefined,
- showSorterTooltip: col.tooltip ? { title: col.tooltip, overlayClassName: tooltipClass } : true,
- };
- });
-};
-
-const getTableRows = function (rows: any): any {
- return rows.map((row: any) => {
- let i = 0;
- const res: any = {};
- row.forEach((entry: any) => {
- res[`col${i++}`] = entry;
- });
- return res;
- });
-};
-
-export const AntTableChart: React.FC = (props) => {
- const { graph, sortColumn, initialPageSize, onRowSelected } = props;
- const classes = useStyles(props);
-
- const rows = React.useMemo(() => getTableRows(graph.rows), [graph.rows]);
-
- const columns = React.useMemo(
- () => getTableColumns(graph.columns, sortColumn, classes.tooltip),
- [graph.columns, sortColumn, classes.tooltip]
- );
-
- // key is used to reset the Table state (page and sort) if the columns change
- const key: string = React.useMemo(() => `${Math.random()}`, [graph.columns]);
-
- const [pageSize, setPageSize] = React.useState(initialPageSize ?? 30);
- const onShowSizeChange = (current: number, size: number): void => {
- setPageSize(size);
- };
-
- const onRow = (
- record: object,
- rowIndex?: number
- ): {
- onMouseEnter: (event: any) => void;
- onMouseLeave: (event: any) => void;
- } => {
- return {
- onMouseEnter: (event: any): void => {
- if (onRowSelected) {
- onRowSelected(record, rowIndex);
- }
- },
- onMouseLeave: (event: any): void => {
- if (onRowSelected) {
- onRowSelected(undefined, undefined);
- }
- },
- };
- };
-
- return (
-
- );
-};
diff --git a/plugins/tensorboard-plugins/tb_plugin/fe/src/components/charts/AreaChart.tsx b/plugins/tensorboard-plugins/tb_plugin/fe/src/components/charts/AreaChart.tsx
deleted file mode 100644
index cda12860c2fba41f5a15c5d9e73fb92093c0371b..0000000000000000000000000000000000000000
--- a/plugins/tensorboard-plugins/tb_plugin/fe/src/components/charts/AreaChart.tsx
+++ /dev/null
@@ -1,72 +0,0 @@
-/*---------------------------------------------------------------------------------------------
- * Copyright (c) Microsoft Corporation. All rights reserved.
- *--------------------------------------------------------------------------------------------*/
-
-import { makeStyles } from '@material-ui/core/styles';
-import * as React from 'react';
-import { Graph } from '../../api';
-import { useResizeEventDependency } from '../../utils/resize';
-
-interface IProps {
- graph: Graph;
- height?: number;
- hAxisTitle?: string;
-}
-
-const useStyles = makeStyles(() => ({
- root: {
- height: (props: Pick): number | undefined => props.height,
- },
-}));
-
-export const AreaChart: React.FC = (props) => {
- const { graph, height = 400, hAxisTitle } = props;
- const classes = useStyles({ height });
- const graphRef = React.useRef(null);
- const [resizeEventDependency] = useResizeEventDependency();
-
- React.useLayoutEffect(() => {
- const element = graphRef.current;
- if (!element) {
- return undefined;
- }
-
- const data = new google.visualization.DataTable();
- data.addColumn('string', 'step');
- graph.columns.forEach((column) => {
- data.addColumn({
- type: column.type,
- label: column.name,
- role: column.role,
- p: column.p,
- });
- });
- data.addRows(graph.rows.map((x, i) => [(i + 1).toString(), ...x]));
-
- const options = {
- title: graph.title,
- isStacked: true,
- height,
- legend: { position: 'bottom' },
- tooltip: { isHtml: true },
- chartArea: { left: '15%', width: '80%', top: '10%' },
- hAxis: {
- title: hAxisTitle,
- },
- };
-
- const chart = new google.visualization.AreaChart(element);
-
- chart.draw(data, options);
-
- return () => {
- chart.clearChart();
- };
- }, [graph, height, resizeEventDependency]);
-
- return (
-
- );
-};
diff --git a/plugins/tensorboard-plugins/tb_plugin/fe/src/components/charts/ColumnChart.tsx b/plugins/tensorboard-plugins/tb_plugin/fe/src/components/charts/ColumnChart.tsx
deleted file mode 100644
index ae51dc1a34e94b1c91eab2fe502ffe2cbc20f618..0000000000000000000000000000000000000000
--- a/plugins/tensorboard-plugins/tb_plugin/fe/src/components/charts/ColumnChart.tsx
+++ /dev/null
@@ -1,118 +0,0 @@
-/*---------------------------------------------------------------------------------------------
- * Copyright (c) Microsoft Corporation. All rights reserved.
- *--------------------------------------------------------------------------------------------
- * Copyright (c) 2023, Huawei Technologies.
- * All rights reserved.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- * Modifications: Offer offline supporting.
- *--------------------------------------------------------------------------------------------*/
-
-import * as React from 'react';
-import { useResizeEventDependency } from '../../utils/resize';
-import * as echarts from 'echarts';
-
-interface IProps {
- title?: string;
- units?: string;
- colors?: Array;
- chartData: ColumnChartData;
-}
-
-export interface ColumnChartData {
- legends: Array;
- barLabels: Array;
- barHeights: Array>;
-}
-
-export const ColumnChart: React.FC = (props) => {
- const { title, units, colors, chartData } = props;
- const { legends, barLabels, barHeights } = chartData;
- const graphRef = React.useRef(null);
- const [resizeEventDependency] = useResizeEventDependency();
-
- const getAngleByDataLength = (data: number): number => {
- if (data < 10) {
- return 0;
- } else {
- // 数量越大越趋近于旋转90度
- return 90 * (1 - (10 / data));
- }
- };
-
- React.useLayoutEffect(() => {
- const element = graphRef.current;
- if (!element) {
- return undefined;
- }
-
- const chart = echarts.init(element);
- const dataSource: Array> = [];
- dataSource.push(['worker', ...legends]);
- barHeights.forEach((item, index) => {
- if (barLabels[index] !== undefined) {
- dataSource.push([barLabels[index], ...item]);
- }
- });
- const options: echarts.EChartsOption = {
- title: {
- text: title,
- },
- legend: {
- bottom: 0,
- },
- xAxis: {
- type: 'category',
- axisLabel: {
- interval: 0,
- rotate: getAngleByDataLength(barLabels.length),
- formatter: (name: string) => {
- const index = name.indexOf('@');
- const processedName = index > -1 ? name.slice(index + 1) : name; // 使用新变量处理
- return processedName.length > 16 ? `${processedName.slice(0, 14)}...` : processedName;
- },
- },
- },
- yAxis: {
- type: 'value',
- name: units,
- nameTextStyle: {
- fontSize: 16,
- },
- },
- tooltip: {
- trigger: 'item',
- },
- dataset: {
- source: dataSource,
- },
- series: Array(legends.length).fill({
- type: 'bar',
- stack: 'samesign',
- }),
- };
- if (colors) {
- options.color = colors.slice(0, barLabels.length);
- }
-
- if (options) {
- chart.setOption(options, true);
- }
- return () => {
- chart.dispose();
- };
- }, [title, chartData, resizeEventDependency]);
-
- return
;
-};
diff --git a/plugins/tensorboard-plugins/tb_plugin/fe/src/components/charts/NewLineChart.tsx b/plugins/tensorboard-plugins/tb_plugin/fe/src/components/charts/NewLineChart.tsx
deleted file mode 100644
index a6e222a6cc9d04b3b0c9031be60b91b75fe9ab37..0000000000000000000000000000000000000000
--- a/plugins/tensorboard-plugins/tb_plugin/fe/src/components/charts/NewLineChart.tsx
+++ /dev/null
@@ -1,386 +0,0 @@
-/*--------------------------------------------------------------------------------------------
- * Copyright (c) 2023, Huawei Technologies.
- * All rights reserved.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *--------------------------------------------------------------------------------------------*/
-
-import * as React from 'react';
-import { Graph, GraphAscend } from '../../api';
-import { useResizeEventDependency } from '../../utils/resize';
-import { binarySearch } from '../../utils/binarysearch';
-import * as echarts from 'echarts';
-
-interface IProps {
- graph: Graph | GraphAscend;
- height?: number;
- deviceTarget: string;
- tag: string;
- hAxisTitle?: string;
- vAxisTitle?: string;
- onSelectionChanged?: (start: number, end: number) => void;
- record?: any;
-}
-
-export const LineChart: React.FC = (props) => {
- const { graph, height = 400, deviceTarget, tag, hAxisTitle, vAxisTitle, onSelectionChanged, record } = props;
- const graphRef = React.useRef(null);
- const [resizeEventDependency] = useResizeEventDependency();
- const [chartObj, setChartObj] = React.useState();
- const selectedPoints = React.useRef>([]);
-
- React.useLayoutEffect(() => {
- const element = graphRef.current;
- if (!element) {
- return undefined;
- }
- element.oncontextmenu = (): boolean => {
- return false;
- };
-
- let myChart = echarts.init(element);
-
- let option: echarts.EChartsOption = {
- title: {
- text: graph.title,
- textStyle: {
- fontSize: 16,
- },
- },
- tooltip: { trigger: 'axis' },
- legend: {
- type: 'scroll',
- bottom: 0,
- },
- xAxis: {
- type: 'category',
- boundaryGap: false,
- name: hAxisTitle,
- },
- yAxis: {
- type: 'value',
- name: vAxisTitle,
- scale: true,
- },
- toolbox: {
- feature: {
- dataZoom: {
- yAxisIndex: 'none',
- },
- restore: {},
- },
- },
- };
-
- if (deviceTarget === 'Ascend') {
- if (tag === 'Component') {
- const mixedTooltip: echarts.TooltipComponentOption = {
- trigger: 'axis',
- formatter: function (params: any) {
- let res = `${params[0].name}
-
- ${item.seriesName}: ${item.value[item.encode.y[0]]}) => {
- return [item[0], null, null, item[1]];
- });
- finalRows = finalRows.concat(mergedAPPRows).sort((a: any, b: any) => {
- return a[0] - b[0];
- });
- }
- option = {
- ...option,
- tooltip: mixedTooltip,
- dataset: {
- source: [graph.columns.map((column) => column.name), ...finalRows],
- },
- series: Array(graph.columns.length - 1).fill({
- type: 'line',
- select: {
- itemStyle: {
- borderWidth: 5,
- shadowBlur: 5,
- },
- },
- emphasis: {
- itemStyle: {
- borderWidth: 5,
- shadowBlur: 5,
- },
- },
- selectedMode: 'single',
- }),
- };
- } else if (graph.columns.length <= 6) {
- const datasetTitle = graph.columns.map((item) => item.name);
- let mergedGERows = graph.rows.GE.map((item: Array) => {
- return [item[0], null, null, item[1], item[2]];
- });
- if (graph.columns.length === 6) {
- const mergedAPPRows = graph.rows.APP.map((item: Array) => {
- return [item[0], null, null, null, null, item[2]];
- });
- mergedGERows = mergedGERows.concat(mergedAPPRows);
- }
- const finalRows = graph.rows.PTA.concat(mergedGERows).sort((a: any, b: any) => {
- return a[0] - b[0];
- });
- option = {
- ...option,
- tooltip: mixedTooltip,
- dataset: {
- source: [datasetTitle, ...finalRows],
- },
- series: Array(graph.columns.length - 1).fill({
- type: 'line',
- connectNulls: true,
- select: {
- itemStyle: {
- borderWidth: 5,
- shadowBlur: 5,
- },
- },
- emphasis: {
- itemStyle: {
- borderWidth: 5,
- shadowBlur: 5,
- },
- },
- selectedMode: 'single',
- datasetIndex: 0,
- }),
- };
- }
- } else {
- if (graph.columns.length === 3) {
- const datasetTitle1: Array = [];
- const datasetTitle2: Array = [];
- graph.columns.forEach((column, index) => {
- if (index === 0 || index < 2) {
- datasetTitle1.push(column.name);
- }
- if (index === 0 || index >= 2) {
- datasetTitle2.push(column.name);
- }
- });
- option = {
- ...option,
- dataset: [
- {
- source: [datasetTitle1, ...graph.rows.Allocated],
- },
- {
- source: [datasetTitle2, ...graph.rows.Reserved],
- },
- ],
- series: [
- {
- type: 'line',
- name: 'Allocated',
- emphasis: {
- label: {
- show: true,
- },
- itemStyle: {
- borderWidth: 5,
- shadowBlur: 5,
- },
- },
- select: {
- itemStyle: {
- borderWidth: 5,
- shadowBlur: 5,
- },
- },
- datasetIndex: 0,
- },
- {
- type: 'line',
- name: 'Reserved',
- select: {
- itemStyle: {
- borderWidth: 5,
- shadowBlur: 5,
- },
- },
- emphasis: {
- itemStyle: {
- borderWidth: 5,
- shadowBlur: 5,
- },
- },
- selectedMode: 'single',
- datasetIndex: 1,
- },
- ],
- };
- }
- }
- } else {
- option = {
- ...option,
- dataset: {
- source: [graph.columns.map((column) => column.name), ...graph.rows],
- },
- series: [
- {
- type: 'line',
- name: 'Allocated',
- select: {
- itemStyle: {
- borderWidth: 5,
- shadowBlur: 5,
- },
- },
- emphasis: {
- itemStyle: {
- borderWidth: 5,
- shadowBlur: 5,
- },
- },
- selectedMode: 'single',
- },
- {
- type: 'line',
- name: 'Reserved',
- select: {
- itemStyle: {
- borderWidth: 5,
- shadowBlur: 5,
- },
- },
- emphasis: {
- itemStyle: {
- borderWidth: 5,
- shadowBlur: 5,
- },
- },
- selectedMode: 'single',
- },
- ],
- };
- }
-
- if (option) {
- myChart.setOption(option, true);
- }
- myChart.dispatchAction({
- type: 'takeGlobalCursor',
- key: 'dataZoomSelect',
- dataZoomSelectActive: true,
- });
-
- myChart.on('dataZoom', (param: any) => {
- if (onSelectionChanged) {
- onSelectionChanged(param.batch[0].startValue, param.batch[0].endValue);
- }
- });
-
- myChart.on('restore', () => {
- if (onSelectionChanged) {
- // Set startId greater than endId to query all memory events.
- onSelectionChanged(0, -1);
- }
- });
-
- myChart.on('click', (param) => {
- myChart.dispatchAction({
- type: 'unselect',
- seriesId: param.seriesId,
- dataIndex: selectedPoints.current,
- });
- myChart.dispatchAction({
- type: 'select',
- seriesId: param.seriesId,
- dataIndex: param.dataIndex,
- });
-
- selectedPoints.current = [param.dataIndex];
- });
-
- myChart.getZr().on('contextmenu', () => {
- myChart.dispatchAction({
- type: 'restore',
- });
- myChart.dispatchAction({
- type: 'takeGlobalCursor',
- key: 'dataZoomSelect',
- dataZoomSelectActive: true,
- });
- });
-
- setChartObj(myChart);
- return () => {
- myChart.dispose();
- };
- }, [graph, height, resizeEventDependency]);
-
- React.useEffect(() => {
- const compareFn = (key: number, mid: Array): number => key - mid[0];
- if (chartObj && tag === 'Operator') {
- if (record) {
- let startId = -1;
- let endId = -1;
- if (deviceTarget === 'Ascend') {
- startId = binarySearch(graph.rows.Allocated, record.col2, compareFn);
- endId = binarySearch(graph.rows.Allocated, record.col3, compareFn);
- } else {
- startId = binarySearch(graph.rows, record.col2, compareFn);
- endId = binarySearch(graph.rows, record.col3, compareFn);
- }
- let selection = [];
- if (startId >= 0) {
- selection.push(startId);
- }
- if (endId >= 0) {
- selection.push(endId);
- }
- chartObj.dispatchAction({
- type: 'downplay',
- seriesName: 'Allocated',
- dataIndex: selectedPoints.current,
- });
- chartObj.dispatchAction({
- type: 'highlight',
- seriesName: 'Allocated',
- dataIndex: selection,
- });
- selectedPoints.current = selection;
- } else {
- chartObj.dispatchAction({
- type: 'downplay',
- seriesName: 'Allocated',
- dataIndex: selectedPoints.current,
- });
- selectedPoints.current = [];
- }
- }
- }, [graph, record, chartObj]);
-
- return
;
-};
diff --git a/plugins/tensorboard-plugins/tb_plugin/fe/src/components/charts/PieChart.tsx b/plugins/tensorboard-plugins/tb_plugin/fe/src/components/charts/PieChart.tsx
deleted file mode 100644
index 49c59ff02e91f7b7fe0d90ddff4239478ca19a0a..0000000000000000000000000000000000000000
--- a/plugins/tensorboard-plugins/tb_plugin/fe/src/components/charts/PieChart.tsx
+++ /dev/null
@@ -1,173 +0,0 @@
-/*---------------------------------------------------------------------------------------------
- * Copyright (c) Microsoft Corporation. All rights reserved.
- *--------------------------------------------------------------------------------------------
- * Copyright (c) 2023, Huawei Technologies.
- * All rights reserved.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- * Modifications: Offer offline supporting.
- *--------------------------------------------------------------------------------------------*/
-
-import * as React from 'react';
-import { Graph } from '../../api';
-import { value } from '../../utils';
-import { useResizeEventDependency } from '../../utils/resize';
-import * as echarts from 'echarts';
-
-interface IProps {
- graph: Graph;
- height?: number;
- top?: number;
- noLegend?: boolean;
- title?: string;
- colors?: Array;
- tooltipMode?: string;
-}
-
-interface IAreaPosition {
- left: string;
- width: string;
- top?: string;
- height?: string;
-}
-
-const noLegendArea: IAreaPosition = {
- left: '5%',
- width: '90%',
- top: '5%',
- height: '90%',
-};
-const normalArea: IAreaPosition = { left: '5%', width: '95%' };
-const noTitleArea: IAreaPosition = {
- left: '5%',
- width: '95%',
- top: '10%',
- height: '80%',
-};
-
-export const PieChart: React.FC = (props) => {
- const { graph, height = 300, top, noLegend, title, colors, tooltipMode = 'both' } = props;
- const graphRef = React.useRef(null);
-
- const [resizeEventDependency] = useResizeEventDependency();
-
- React.useLayoutEffect(() => {
- const element = graphRef.current;
- if (!element) {
- return undefined;
- }
-
- const chart = echarts.init(element);
-
- let totalValue = 0;
- const rowsWithUniqueName: Array<{ name: string; value: number }> =
- top === undefined
- ? graph.rows.map((item, index) => {
- totalValue += item[1] as number;
- return { name: `${index}_${item[0]}`, value: item[1] as number };
- })
- : graph.rows
- .sort((a, b) => (value(b[1]) as number) - (value(a[1]) as number))
- .slice(0, top)
- .map((item, index) => {
- totalValue += item[1] as number;
- return { name: `${index}_${item[0]}`, value: item[1] as number };
- });
-
- const option: echarts.EChartsOption = {
- height,
- width: '100%',
- title: {
- text: title,
- },
- tooltip: {
- trigger: 'item',
- formatter: (data) => {
- const typedData = data as echarts.DefaultLabelFormatterCallbackParams;
- const index = typedData.name.indexOf('_');
- const safeName = typedData.name.replace(//g, '>');
- return `${index > -1 ? safeName.slice(index + 1) : safeName}${
- tooltipMode === 'both' ? typedData.value : ''
- }(${typedData.percent}%)${
- tooltipMode === 'both' ? currentItem?.value || 0 : ''
- }(${percent}%)
;
-};
diff --git a/plugins/tensorboard-plugins/tb_plugin/fe/src/components/charts/SteppedAreaChart.tsx b/plugins/tensorboard-plugins/tb_plugin/fe/src/components/charts/SteppedAreaChart.tsx
deleted file mode 100644
index 3e3b01ccb112aeb80795246bd6f3e2ad83aa2a66..0000000000000000000000000000000000000000
--- a/plugins/tensorboard-plugins/tb_plugin/fe/src/components/charts/SteppedAreaChart.tsx
+++ /dev/null
@@ -1,106 +0,0 @@
-/*---------------------------------------------------------------------------------------------
- * Copyright (c) Microsoft Corporation. All rights reserved.
- *--------------------------------------------------------------------------------------------
- * Copyright (c) 2023, Huawei Technologies.
- * All rights reserved.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- * Modifications: Offer offline supporting.
- *--------------------------------------------------------------------------------------------*/
-
-import { makeStyles } from '@material-ui/core/styles';
-import * as React from 'react';
-import { StepedGraph } from '../../api';
-import { useResizeEventDependency } from '../../utils/resize';
-import * as echarts from 'echarts';
-
-interface IProps {
- graph: StepedGraph;
- height?: number;
- hAxisTitle?: string;
- vAxisTitle?: string;
-}
-
-const useStyles = makeStyles(() => ({
- root: {
- height: (props: Pick): number | undefined => props.height,
- },
-}));
-
-export const SteppedAreaChart: React.FC = (props) => {
- const { graph, height = 400, hAxisTitle, vAxisTitle } = props;
- const classes = useStyles({ height });
- const graphRef = React.useRef(null);
- const [resizeEventDependency] = useResizeEventDependency();
-
- React.useLayoutEffect(() => {
- const element = graphRef.current;
- if (!element) {
- return undefined;
- }
-
- const chart = echarts.init(element);
- const dataSource: Array> = [];
- dataSource.push(graph.columns);
- graph.rows.forEach((row) => {
- dataSource.push(row.map((item) => item.value));
- });
- const options: echarts.EChartsOption = {
- title: {
- text: graph.title,
- },
- legend: {
- bottom: 0,
- },
- xAxis: {
- type: 'category',
- name: hAxisTitle,
- axisLabel: {
- interval: 0,
- },
- },
- yAxis: {
- type: 'value',
- name: vAxisTitle,
- },
- tooltip: {
- trigger: 'item',
- formatter: (params: any) => {
- return graph.rows[params.dataIndex][params.seriesIndex + 1]?.tooltip || '';
- },
- },
- dataset: {
- source: dataSource,
- },
- series: Array(graph.columns.length - 1).fill({
- type: 'bar',
- stack: 'samesign',
- }),
- };
-
- if (options) {
- chart.setOption(options, true);
- }
-
- return () => {
- chart.dispose();
- };
- }, [graph, height, resizeEventDependency]);
-
- return (
-
- );
-};
diff --git a/plugins/tensorboard-plugins/tb_plugin/fe/src/components/charts/TableChart.tsx b/plugins/tensorboard-plugins/tb_plugin/fe/src/components/charts/TableChart.tsx
deleted file mode 100644
index 444b41b196c162340b846ac488d70eb908c7b717..0000000000000000000000000000000000000000
--- a/plugins/tensorboard-plugins/tb_plugin/fe/src/components/charts/TableChart.tsx
+++ /dev/null
@@ -1,85 +0,0 @@
-/*---------------------------------------------------------------------------------------------
- * Copyright (c) Microsoft Corporation. All rights reserved.
- *--------------------------------------------------------------------------------------------*/
-
-import { makeStyles } from '@material-ui/core/styles';
-import * as React from 'react';
-import { Graph } from '../../api';
-import { useResizeEventDependency } from '../../utils/resize';
-
-interface IProps {
- graph: Graph;
- sortColumn?: number;
- height?: number;
- allowHtml?: boolean;
- setCellProperty?: (row: number, column: number, cb: (key: string, value: any) => void) => void;
-}
-
-const useStyles = makeStyles(() => ({
- root: {
- height: (props: IProps): number | undefined => props.height,
- },
-}));
-
-export const TableChart: React.FC = (props) => {
- const { graph, sortColumn, setCellProperty, allowHtml } = props;
- const classes = useStyles(props);
- const graphRef = React.useRef(null);
- const [resizeEventDependency] = useResizeEventDependency();
-
- React.useLayoutEffect(() => {
- const element = graphRef.current;
- if (!element || !element.parentElement) {
- return;
- }
-
- const data = new google.visualization.DataTable();
- graph.columns.forEach((column) => {
- data.addColumn({
- type: column.type,
- label: column.name,
- role: column.role,
- p: column.p,
- });
- });
- data.addRows(graph.rows);
-
- if (setCellProperty) {
- for (let row = 0; row < graph.rows.length; ++row) {
- for (let column = 0; column < graph.columns.length; ++column) {
- setCellProperty(row, column, (key: string, value: any) => {
- data.setProperty(row, column, key, value);
- });
- }
- }
- }
-
- const options = {
- width: '100%',
- height: '100%',
- page: 'enable',
- allowHtml,
- pageSize: 30,
- tooltip: { isHtml: true },
- sortColumn: sortColumn,
- sortAscending: false,
- };
-
- const chart = new google.visualization.Table(element);
-
- /* `chart.draw()` removes the contents of `element` and rebuilds it. This can cause a jump in the scroll position
- * if the height/width change to 0. Since we can't change the code of Google Charts, we temporarily lock the dims
- * of the parent container. */
- if (element.offsetHeight > 0) {
- element.parentElement.style.height = `${element.offsetHeight}px`;
- }
- chart.draw(data, options);
- element.parentElement.style.height = '';
- }, [graph, resizeEventDependency]);
-
- return (
-
- );
-};
diff --git a/plugins/tensorboard-plugins/tb_plugin/fe/src/components/helpers.tsx b/plugins/tensorboard-plugins/tb_plugin/fe/src/components/helpers.tsx
deleted file mode 100644
index bfbb346e4b3daf65247e6e954346ed7245993f31..0000000000000000000000000000000000000000
--- a/plugins/tensorboard-plugins/tb_plugin/fe/src/components/helpers.tsx
+++ /dev/null
@@ -1,41 +0,0 @@
-/*---------------------------------------------------------------------------------------------
- * Copyright (c) Microsoft Corporation. All rights reserved.
- *--------------------------------------------------------------------------------------------*/
-
-import { makeStyles } from '@material-ui/core/styles';
-import Tooltip from '@material-ui/core/Tooltip';
-import HelpOutline from '@material-ui/icons/HelpOutline';
-import clsx from 'clsx';
-import * as React from 'react';
-
-export const useTooltipCommonStyles = makeStyles((theme) => ({
- tooltip: {
- maxWidth: '600px',
- whiteSpace: 'pre-wrap',
- fontSize: '14px',
- },
- cardTitle: {
- display: 'flex',
- alignItems: 'center',
- },
- titleText: {
- marginRight: theme.spacing(0.5),
- },
- smallTitleText: {
- fontSize: '.8rem',
- fontWeight: 'bold',
- },
-}));
-
-export const makeChartHeaderRenderer =
- (classes: ReturnType, smallTitleText = true) =>
- (title: string, tooltip: string): JSX.Element => {
- return (
-
- {title}
-
-
-
- );
- };
diff --git a/plugins/tensorboard-plugins/tb_plugin/fe/src/components/tables/CallFrameList.tsx b/plugins/tensorboard-plugins/tb_plugin/fe/src/components/tables/CallFrameList.tsx
deleted file mode 100644
index 0334d29e511399664d5204224e47cf1b88d50655..0000000000000000000000000000000000000000
--- a/plugins/tensorboard-plugins/tb_plugin/fe/src/components/tables/CallFrameList.tsx
+++ /dev/null
@@ -1,35 +0,0 @@
-/*---------------------------------------------------------------------------------------------
- * Copyright (c) Microsoft Corporation. All rights reserved.
- *--------------------------------------------------------------------------------------------*/
-
-import * as React from 'react';
-import { CallStackFrame } from './transform';
-import { List } from 'antd';
-import { NavToCodeButton } from './NavToCodeButton';
-import { makeStyles } from '@material-ui/core/styles';
-
-interface IProps {
- callFrames: CallStackFrame[];
-}
-
-const useStyles = makeStyles(() => ({
- item: {
- paddingTop: '1px !important',
- paddingBottom: '1px !important',
- },
-}));
-
-export const CallFrameList = (props: IProps): React.JSX.Element => {
- const classes = useStyles();
-
- const renderItem = React.useCallback(
- (item: CallStackFrame) => (
-
-
- ),
- [classes.item]
- );
-
- return
;
-};
diff --git a/plugins/tensorboard-plugins/tb_plugin/fe/src/components/tables/CallStackTable.tsx b/plugins/tensorboard-plugins/tb_plugin/fe/src/components/tables/CallStackTable.tsx
deleted file mode 100644
index c3176428d11b8b40c691947b2f0da8fc15674c16..0000000000000000000000000000000000000000
--- a/plugins/tensorboard-plugins/tb_plugin/fe/src/components/tables/CallStackTable.tsx
+++ /dev/null
@@ -1,103 +0,0 @@
-/*---------------------------------------------------------------------------------------------
- * Copyright (c) Microsoft Corporation. All rights reserved.
- *--------------------------------------------------------------------------------------------
- * Copyright (c) 2023, Huawei Technologies.
- * All rights reserved.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- * Modifications: Add visualization of PyTorch Ascend profiling.
- *--------------------------------------------------------------------------------------------*/
-
-import * as React from 'react';
-import { makeStyles } from '@material-ui/core/styles';
-import { CallStackTableData, OperationTableDataInner } from '../../api';
-import { Table, TableProps } from 'antd';
-
-import * as api from '../../api';
-import { transformTableData, TransformedCallStackDataInner } from './transform';
-import { attachId, getCommonOperationColumns } from './common';
-import { OperationGroupBy } from '../../constants/groupBy';
-import { makeExpandIcon } from './ExpandIcon';
-import { CallFrameList } from './CallFrameList';
-
-export interface IProps {
- data: OperationTableDataInner;
- run: string;
- worker: string;
- span: string;
- groupBy: OperationGroupBy;
- deviceTarget: string;
-}
-
-const useStyles = makeStyles((theme) => ({
- tooltip: {
- whiteSpace: 'pre-wrap',
- },
-}));
-
-const expandIcon = makeExpandIcon(
- 'View call frames',
- (record) => !record.callStackFrames.length
-);
-
-const rowExpandable = (record: TransformedCallStackDataInner): boolean => !!record.callStackFrames.length;
-const expandedRowRender = (record: TransformedCallStackDataInner): React.JSX.Element => (
- (undefined);
- const [tooltips, setTooltips] = React.useState();
-
- React.useEffect(() => {
- api.defaultApi.operationStackGet(run, worker, span, groupBy, name, input_shape).then((resp) => {
- setTooltips(resp.metadata.tooltips);
- setStackData(resp.data);
- });
- }, [name, input_shape, run, worker, span, groupBy]);
-
- const transformedData = React.useMemo(() => stackData && transformTableData(attachId(stackData)), [stackData]);
-
- const columns = React.useMemo(
- () => transformedData && getCommonOperationColumns(transformedData, deviceTarget, undefined, tooltips, classes),
- [transformedData]
- );
-
- const expandIconColumnIndex = columns?.length;
-
- const expandable: TableProps['expandable'] = React.useMemo(
- () => ({
- expandIconColumnIndex,
- expandIcon,
- expandedRowRender,
- rowExpandable,
- }),
- [expandIconColumnIndex]
- );
-
- return (
-
- );
-};
diff --git a/plugins/tensorboard-plugins/tb_plugin/fe/src/components/tables/ExpandIcon.tsx b/plugins/tensorboard-plugins/tb_plugin/fe/src/components/tables/ExpandIcon.tsx
deleted file mode 100644
index 422bb781630c24c6dc4915c3aed8c1f341dba363..0000000000000000000000000000000000000000
--- a/plugins/tensorboard-plugins/tb_plugin/fe/src/components/tables/ExpandIcon.tsx
+++ /dev/null
@@ -1,35 +0,0 @@
-/*---------------------------------------------------------------------------------------------
- * Copyright (c) Microsoft Corporation. All rights reserved.
- *--------------------------------------------------------------------------------------------*/
-
-import * as React from 'react';
-import { Button, TableProps } from 'antd';
-import { OperationTableDataInner, CallStackTableDataInner } from '../../api';
-import { Arguments } from '../../utils/type';
-
-type Types = NonNullable['expandable']>['expandIcon'];
-type BasePropType = Arguments>>[0];
-type PropType = BasePropType & { text: string; disabled?: boolean };
-
-export function ExpandIcon(
- props: PropType
-): React.JSX.Element {
- const onClick = (e: React.MouseEvent): void => {
- props.onExpand(props.record, e);
- };
-
- return (
-
- {props.text}
-
- );
-}
-
-export function makeExpandIcon(
- text: string,
- disabled?: (v: T) => boolean
-) {
- return (props: BasePropType): React.JSX.Element => (
-