From c77b45b4b10fa6893d4573fd6d13ba89382b969c Mon Sep 17 00:00:00 2001 From: wuyulong11 Date: Thu, 16 Nov 2023 17:21:11 +0800 Subject: [PATCH] =?UTF-8?q?=E3=80=90=E4=BF=AE=E6=94=B9=E4=BF=A1=E6=81=AF?= =?UTF-8?q?=E3=80=91=E3=80=90tbplugin=E3=80=91=E3=80=90=E9=9C=80=E6=B1=82?= =?UTF-8?q?=E3=80=91loss=E6=94=B6=E6=95=9B=E5=88=86=E6=9E=90=E7=95=8C?= =?UTF-8?q?=E9=9D=A2=E5=A2=9E=E5=8A=A0=E6=AF=94=E5=AF=B9=E6=96=B9=E5=BC=8F?= =?UTF-8?q?=E8=AF=B4=E6=98=8E=E5=9B=BE=E6=A0=87=20=E3=80=90=E4=BF=AE?= =?UTF-8?q?=E6=94=B9=E4=BA=BA=E3=80=91=20wuyulong=2030031080?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../tb_plugin/fe/src/app.tsx | 10 +++++-- .../components/Accuracy/AccuracyLeftPanel.tsx | 8 +++--- .../components/Accuracy/ComparisonPanel.tsx | 26 +++++++++++++++++-- .../components/Accuracy/LossComparison.tsx | 14 +++++----- 4 files changed, 44 insertions(+), 14 deletions(-) diff --git a/plugins/tensorboard-plugins/tb_plugin/fe/src/app.tsx b/plugins/tensorboard-plugins/tb_plugin/fe/src/app.tsx index 2acfe15907b..22888dbf0fa 100644 --- a/plugins/tensorboard-plugins/tb_plugin/fe/src/app.tsx +++ b/plugins/tensorboard-plugins/tb_plugin/fe/src/app.tsx @@ -210,6 +210,7 @@ export const App = () => { const [topTab, setTopTab] = React.useState(0) const [fileList, setFileList] = React.useState([]) + const [uploadedCount, setUploadedCount] = React.useState(0) // #endregion @@ -409,6 +410,10 @@ export const App = () => { } } + const _changeUploadCount = (count: number) => { + setUploadedCount(count) + } + // #endregion const renderContent = () => { @@ -644,7 +649,8 @@ export const App = () => { ) : } @@ -660,7 +666,7 @@ export const App = () => { )}
- {topTab === 0 ? renderContent() : } + {topTab === 0 ? renderContent() : }
) diff --git a/plugins/tensorboard-plugins/tb_plugin/fe/src/components/Accuracy/AccuracyLeftPanel.tsx b/plugins/tensorboard-plugins/tb_plugin/fe/src/components/Accuracy/AccuracyLeftPanel.tsx index 97eaa0fc7e6..71682214de9 100644 --- a/plugins/tensorboard-plugins/tb_plugin/fe/src/components/Accuracy/AccuracyLeftPanel.tsx +++ b/plugins/tensorboard-plugins/tb_plugin/fe/src/components/Accuracy/AccuracyLeftPanel.tsx @@ -33,7 +33,8 @@ import { RegexConfigModal } from './RegexConfigModal' import { FileInfo } from './entity' interface IProps { - onChangeFileList: (files: FileInfo[]) => void + onChangeCheckedFileList: (files: FileInfo[]) => void + onChangeUploadedCount: (count: number) => void } // 匹配数字包括科学计数法 @@ -108,7 +109,7 @@ const useStyles = makeStyles(() => ({ // 最大文件上传数量 export const MAX_FILE_COUNT = 6 export const AccuracyLeftPanel: React.FC = (props) => { - const { onChangeFileList } = props + const { onChangeCheckedFileList, onChangeUploadedCount } = props const classes = useStyles() const [configModalVis, setConfigModalVis] = useState(false) const [deleteModalVis, setDeleteModalVis] = useState(false) @@ -297,7 +298,8 @@ export const AccuracyLeftPanel: React.FC = (props) => { }, [JSON.stringify(fileList)]) useEffect(() => { - onChangeFileList(fileList) + onChangeCheckedFileList(fileList.filter(item => item.checked)) + onChangeUploadedCount(fileList.length) }, [JSON.stringify(fileList)]) return ( diff --git a/plugins/tensorboard-plugins/tb_plugin/fe/src/components/Accuracy/ComparisonPanel.tsx b/plugins/tensorboard-plugins/tb_plugin/fe/src/components/Accuracy/ComparisonPanel.tsx index 5b066eeb1e9..cb435bc1c9b 100644 --- a/plugins/tensorboard-plugins/tb_plugin/fe/src/components/Accuracy/ComparisonPanel.tsx +++ b/plugins/tensorboard-plugins/tb_plugin/fe/src/components/Accuracy/ComparisonPanel.tsx @@ -18,12 +18,13 @@ *--------------------------------------------------------------------------------------------*/ import * as React from 'react' -import { useState, useLayoutEffect, useRef } from 'react' +import { useState, useLayoutEffect, useRef, useEffect } from 'react' import { makeStyles } from '@material-ui/core/styles' import { FileInfo } from './entity' -import { Empty, Radio, RadioChangeEvent, Select, Table } from 'antd' +import { Empty, Popover, Radio, RadioChangeEvent, Select, Table } from 'antd' import { ColumnsType } from 'antd/es/table' import * as echarts from 'echarts' +import { InfoCircleOutlined } from '@ant-design/icons' interface IProps { fileList: FileInfo[] @@ -61,6 +62,9 @@ const useStyles = makeStyles(() => ({ }, '& .comparisonBtn': { marginLeft: 20 + }, + '& .infoLabel': { + fontSize: 20 } }, empty: { @@ -220,6 +224,13 @@ export const ComparisonPanel: React.FC = (props) => { } }, [compareWay, lineData]) + useEffect(() => { + const tempValue = selectedFiles.filter(item => { + return !!fileList.find(file => file.fileName === item) + }) + setSelectedFiles(tempValue) + }, [fileList]) + return (
Comparison Data
@@ -250,6 +261,17 @@ export const ComparisonPanel: React.FC = (props) => { 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 ? 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 index 23a669685d9..e6df761f8de 100644 --- a/plugins/tensorboard-plugins/tb_plugin/fe/src/components/Accuracy/LossComparison.tsx +++ b/plugins/tensorboard-plugins/tb_plugin/fe/src/components/Accuracy/LossComparison.tsx @@ -27,6 +27,7 @@ import { MAX_FILE_COUNT } from './AccuracyLeftPanel' interface IProps { fileList: FileInfo[] + fileCount: number } const useStyles = makeStyles(() => ({ @@ -54,12 +55,11 @@ const useStyles = makeStyles(() => ({ })) export const LossComparison: React.FC = (props) => { - const { fileList } = props + const { fileList, fileCount } = props const classes = useStyles() - const checkedFiles = fileList.filter(item => item.checked) const onImportFile = () => { - if (fileList.length >= MAX_FILE_COUNT) { + if (fileCount >= MAX_FILE_COUNT) { message.warn(`You can import no more than ${MAX_FILE_COUNT} files.`) return } @@ -68,7 +68,7 @@ export const LossComparison: React.FC = (props) => { return (
- {checkedFiles.length <= 0 ? + {fileList.length <= 0 ? <> Welcome to loss comparison
Select left files or Import files
@@ -76,9 +76,9 @@ export const LossComparison: React.FC = (props) => { : <> - - {checkedFiles.length > 1 && - + + {fileList.length > 1 && + } } -- Gitee