diff --git a/plugins/tensorboard-plugins/tb_plugin/fe/src/app.tsx b/plugins/tensorboard-plugins/tb_plugin/fe/src/app.tsx
index 2acfe15907bb7fc20ee536fb40e598678f25c6f5..22888dbf0fa49d2550224a7b2c02ade93a4eafe0 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<number>(0)
   const [fileList, setFileList] = React.useState<FileInfo[]>([])
+  const [uploadedCount, setUploadedCount] = React.useState<number>(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 = () => {
           </>
         ) :
           <AccuracyLeftPanel
-            onChangeFileList={_changeFileList}
+            onChangeCheckedFileList={_changeFileList}
+            onChangeUploadedCount={_changeUploadCount}
           />
         }
       </Drawer>
@@ -660,7 +666,7 @@ export const App = () => {
         </Fab>
       )}
       <main className={classes.content}>
-        {topTab === 0 ? renderContent() : <LossComparison fileList={fileList} />}
+        {topTab === 0 ? renderContent() : <LossComparison fileList={fileList} fileCount={uploadedCount} />}
       </main>
     </div >
   )
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 97eaa0fc7e6df5b881d4f95fa8fd9efcd03fb373..71682214de9357fb2a757ff7d84ac4a47cd471ab 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<IProps> = (props) => {
-  const { onChangeFileList } = props
+  const { onChangeCheckedFileList, onChangeUploadedCount } = props
   const classes = useStyles()
   const [configModalVis, setConfigModalVis] = useState<boolean>(false)
   const [deleteModalVis, setDeleteModalVis] = useState<boolean>(false)
@@ -297,7 +298,8 @@ export const AccuracyLeftPanel: React.FC<IProps> = (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 5b066eeb1e9be65ab9e8d1adb916c3cf90ae28a9..cb435bc1c9b474a15b5999087ead848980305fae 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<IProps> = (props) => {
     }
   }, [compareWay, lineData])
 
+  useEffect(() => {
+    const tempValue = selectedFiles.filter(item => {
+      return !!fileList.find(file => file.fileName === item)
+    })
+    setSelectedFiles(tempValue)
+  }, [fileList])
+
   return (
     <div className={classes.root}>
       <div className={classes.title}>Comparison Data</div>
@@ -250,6 +261,17 @@ export const ComparisonPanel: React.FC<IProps> = (props) => {
           <Radio value={1}>Comparison Absolute</Radio>
           <Radio value={2}>Comparison Relative</Radio>
         </Radio.Group>
+        <Popover
+          content={
+            <>
+              <div><b>Normal:</b> The real difference.</div>
+              <div><b>Absolute:</b> The absolute value of difference.</div>
+              <div><b>Relative:</b> The absolute value of difference divided by the loss value of the first file.</div>
+            </>
+          }
+        >
+          <InfoCircleOutlined className="infoLabel" />
+        </Popover>
       </div>
       {selectedFiles.length < 2 ?
         <Empty className={classes.empty} description='Select 2 comparison files in the drop-down list' />
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 23a669685d9924482a3be39767a0d982da38c7a1..e6df761f8de43c8219cc19841d7cd9511ea311b0 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<IProps> = (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<IProps> = (props) => {
 
   return (
     <div className={classes.root}>
-      {checkedFiles.length <= 0 ?
+      {fileList.length <= 0 ?
         <>
           <span className="welcomeLabel">Welcome to loss comparison</span>
           <div className='importText'>Select left files or <span onClick={onImportFile}>Import files</span></div>
@@ -76,9 +76,9 @@ export const LossComparison: React.FC<IProps> = (props) => {
         </>
         :
         <>
-          <LossDisplayPanel fileList={checkedFiles} />
-          {checkedFiles.length > 1 &&
-            <ComparisonPanel fileList={checkedFiles} />
+          <LossDisplayPanel fileList={fileList} />
+          {fileList.length > 1 &&
+            <ComparisonPanel fileList={fileList} />
           }
         </>
       }