PaddlePaddle · PeterPanZH · May 20, 2021 · May 19, 2021 · May 19, 2021 · May 19, 2021
diff --git a/frontend/package.json b/frontend/package.json
@@ -38,19 +38,19 @@
         "version": "yarn format && git add -A"
     },
     "devDependencies": {
-        "@typescript-eslint/eslint-plugin": "4.21.0",
-        "@typescript-eslint/parser": "4.21.0",
-        "eslint": "7.23.0",
-        "eslint-config-prettier": "8.1.0",
+        "@typescript-eslint/eslint-plugin": "4.24.0",
+        "@typescript-eslint/parser": "4.24.0",
+        "eslint": "7.26.0",
+        "eslint-config-prettier": "8.3.0",
         "eslint-plugin-license-header": "0.2.0",
-        "eslint-plugin-prettier": "3.3.1",
-        "eslint-plugin-react": "7.23.1",
+        "eslint-plugin-prettier": "3.4.0",
+        "eslint-plugin-react": "7.23.2",
         "eslint-plugin-react-hooks": "4.2.0",
         "lerna": "4.0.0",
-        "lint-staged": "10.5.4",
-        "prettier": "2.2.1",
+        "lint-staged": "11.0.0",
+        "prettier": "2.3.0",
         "rimraf": "3.0.2",
-        "typescript": "4.2.3",
+        "typescript": "4.2.4",
         "yarn": "1.22.10"
     },
     "engines": {

diff --git a/frontend/packages/cli/package.json b/frontend/packages/cli/package.json
@@ -35,17 +35,17 @@
     ],
     "dependencies": {
         "@visualdl/server": "2.1.5",
-        "open": "8.0.5",
+        "open": "8.0.9",
         "ora": "5.4.0",
         "pm2": "4.5.6",
-        "yargs": "16.2.0"
+        "yargs": "17.0.1"
     },
     "devDependencies": {
-        "@types/node": "14.14.37",
-        "@types/yargs": "16.0.1",
+        "@types/node": "15.3.0",
+        "@types/yargs": "16.0.2",
         "cross-env": "7.0.3",
         "ts-node": "9.1.1",
-        "typescript": "4.2.3"
+        "typescript": "4.2.4"
     },
     "engines": {
         "node": ">=12",

diff --git a/frontend/packages/core/package.json b/frontend/packages/core/package.json
@@ -39,50 +39,50 @@
         "@visualdl/wasm": "2.1.5",
         "bignumber.js": "9.0.1",
         "classnames": "2.3.1",
-        "d3": "6.6.2",
-        "d3-format": "2.0.0",
+        "d3": "6.7.0",
+        "d3-format": "3.0.0",
         "echarts": "4.9.0",
         "echarts-gl": "1.1.2",
         "eventemitter3": "4.0.7",
         "file-saver": "2.0.5",
-        "i18next": "20.2.1",
-        "i18next-browser-languagedetector": "6.1.0",
+        "i18next": "20.2.4",
+        "i18next-browser-languagedetector": "6.1.1",
         "i18next-fetch-backend": "3.0.0",
         "jszip": "3.6.0",
         "lodash": "4.17.21",
         "mime-types": "2.1.30",
         "moment": "2.29.1",
         "nprogress": "0.2.0",
         "numeric": "1.2.6",
-        "polished": "4.1.1",
+        "polished": "4.1.2",
         "query-string": "7.0.0",
         "react": "17.0.2",
         "react-content-loader": "6.0.3",
         "react-dnd": "14.0.2",
         "react-dnd-html5-backend": "14.0.0",
         "react-dom": "17.0.2",
         "react-helmet": "6.1.0",
-        "react-i18next": "11.8.12",
+        "react-i18next": "11.8.15",
         "react-input-range": "1.3.0",
         "react-is": "17.0.2",
         "react-rangeslider": "2.2.0",
-        "react-redux": "7.2.3",
+        "react-redux": "7.2.4",
         "react-router-dom": "5.2.0",
         "react-spinners": "0.10.6",
-        "react-table": "7.6.3",
+        "react-table": "7.7.0",
         "react-table-sticky": "1.1.3",
-        "react-toastify": "7.0.3",
-        "redux": "4.0.5",
-        "styled-components": "5.2.3",
-        "swr": "0.5.5",
-        "three": "0.127.0",
+        "react-toastify": "7.0.4",
+        "redux": "4.1.0",
+        "styled-components": "5.3.0",
+        "swr": "0.5.6",
+        "three": "0.128.0",
         "tippy.js": "6.3.1",
         "umap-js": "1.3.3"
     },
     "devDependencies": {
-        "@babel/core": "7.13.14",
+        "@babel/core": "7.14.3",
         "@babel/plugin-proposal-class-properties": "7.13.0",
-        "@babel/preset-env": "7.13.12",
+        "@babel/preset-env": "7.14.2",
         "@babel/preset-react": "7.13.13",
         "@baiducloud/sdk": "1.0.0-rc.28",
         "@simbathesailor/use-what-changed": "2.0.0",
@@ -91,40 +91,40 @@
         "@snowpack/plugin-optimize": "0.2.10",
         "@snowpack/plugin-run-script": "2.3.0",
         "@svgr/core": "5.5.0",
-        "@testing-library/jest-dom": "5.11.10",
-        "@testing-library/react": "11.2.6",
-        "@types/d3": "6.3.0",
+        "@testing-library/jest-dom": "5.12.0",
+        "@testing-library/react": "11.2.7",
+        "@types/d3": "6.5.0",
         "@types/d3-format": "2.0.0",
         "@types/echarts": "4.9.7",
-        "@types/file-saver": "2.0.1",
-        "@types/jest": "26.0.22",
+        "@types/file-saver": "2.0.2",
+        "@types/jest": "26.0.23",
         "@types/loadable__component": "5.13.3",
-        "@types/lodash": "4.14.168",
+        "@types/lodash": "4.14.169",
         "@types/mime-types": "2.1.0",
         "@types/nprogress": "0.2.0",
         "@types/numeric": "1.2.1",
-        "@types/react": "17.0.3",
-        "@types/react-dom": "17.0.3",
-        "@types/react-helmet": "6.1.0",
+        "@types/react": "17.0.6",
+        "@types/react-dom": "17.0.5",
+        "@types/react-helmet": "6.1.1",
         "@types/react-rangeslider": "2.2.3",
         "@types/react-redux": "7.1.16",
         "@types/react-router-dom": "5.1.7",
-        "@types/react-table": "7.0.29",
+        "@types/react-table": "7.7.0",
         "@types/snowpack-env": "2.3.3",
         "@types/styled-components": "5.1.9",
-        "@types/three": "0.127.0",
+        "@types/three": "0.128.0",
         "@visualdl/mock": "2.1.5",
         "babel-plugin-styled-components": "1.12.0",
-        "dotenv": "8.2.0",
-        "enhanced-resolve": "5.7.0",
+        "dotenv": "9.0.2",
+        "enhanced-resolve": "5.8.2",
         "express": "4.17.1",
-        "fs-extra": "9.1.0",
+        "fs-extra": "10.0.0",
         "html-minifier": "4.0.0",
-        "http-proxy-middleware": "1.1.0",
+        "http-proxy-middleware": "2.0.0",
         "jest": "26.6.3",
         "snowpack": "2.18.5",
-        "typescript": "4.2.3",
-        "yargs": "16.2.0"
+        "typescript": "4.2.4",
+        "yargs": "17.0.1"
     },
     "engines": {
         "node": ">=14",

diff --git a/frontend/packages/core/public/locales/zh/common.json b/frontend/packages/core/public/locales/zh/common.json
@@ -10,7 +10,7 @@
     "empty": "暂无数据",
     "error": "发生错误",
     "graph": "网络结构",
-    "high-dimensional": "高维数据映射",
+    "high-dimensional": "数据降维",
     "histogram": "直方图",
     "hyper-parameter": "超参可视化",
     "image": "图像",

diff --git a/frontend/packages/core/src/components/Audio.tsx b/frontend/packages/core/src/components/Audio.tsx
@@ -212,7 +212,7 @@ const Audio: FunctionComponent<AudioProps & WithStyled> = ({
     }, []);
     const startTimer = useCallback(() => {
         tick();
-        timer.current = (window.setInterval(tick, 250) as unknown) as number;
+        timer.current = window.setInterval(tick, 250) as unknown as number;
     }, [tick]);
     const stopTimer = useCallback(() => {
         if (player.current) {

diff --git a/frontend/packages/core/src/components/BarChart.tsx b/frontend/packages/core/src/components/BarChart.tsx
@@ -40,7 +40,12 @@ export type BarChartRef = {
 
 const BarChart = React.forwardRef<BarChartRef, BarChartProps & WithStyled>(
     ({options, categories, direction, data, title, loading, className, onInit}, ref) => {
-        const {ref: echartRef, echart, wrapper, saveAsImage} = useECharts<HTMLDivElement>({
+        const {
+            ref: echartRef,
+            echart,
+            wrapper,
+            saveAsImage
+        } = useECharts<HTMLDivElement>({
             loading: !!loading,
             autoFit: true,
             onInit

diff --git a/frontend/packages/core/src/components/ChartPage.tsx b/frontend/packages/core/src/components/ChartPage.tsx
@@ -114,10 +114,10 @@ const ChartPage = <T extends Item>({
         }
     }, [items, searchValue]);
 
-    const pageMatchedTags = useMemo(() => matchedTags?.slice((page - 1) * pageSize, page * pageSize) ?? [], [
-        matchedTags,
-        page
-    ]);
+    const pageMatchedTags = useMemo(
+        () => matchedTags?.slice((page - 1) * pageSize, page * pageSize) ?? [],
+        [matchedTags, page]
+    );
 
     useEffect(() => {
         setPage(1);

diff --git a/frontend/packages/core/src/components/CurvesPage/CurveChart.tsx b/frontend/packages/core/src/components/CurvesPage/CurveChart.tsx
@@ -83,7 +83,11 @@ const PRCurveChart: FunctionComponent<PRCurveChartProps> = ({type, runs, tag, ru
 
     const echart = useRef<LineChartRef>(null);
 
-    const {data: dataset, error, loading} = useRunningRequest<PRCurveData[]>(
+    const {
+        data: dataset,
+        error,
+        loading
+    } = useRunningRequest<PRCurveData[]>(
         runs.map(run => `/${type}-curve/list?${queryString.stringify({run: run.label, tag})}`),
         !!running,
         (...urls) => cycleFetcher(urls)

diff --git a/frontend/packages/core/src/components/GraphPage/Graph.tsx b/frontend/packages/core/src/components/GraphPage/Graph.tsx
@@ -208,22 +208,19 @@ const Graph = React.forwardRef<GraphRef, GraphProps>(
         }, [handler, dispatch]);
 
         useEffect(() => (ready && dispatch('change-files', files)) || undefined, [dispatch, files, ready]);
-        useEffect(() => (ready && dispatch('toggle-attributes', showAttributes)) || undefined, [
-            dispatch,
-            showAttributes,
-            ready
-        ]);
-        useEffect(() => (ready && dispatch('toggle-initializers', showInitializers)) || undefined, [
-            dispatch,
-            showInitializers,
-            ready
-        ]);
+        useEffect(
+            () => (ready && dispatch('toggle-attributes', showAttributes)) || undefined,
+            [dispatch, showAttributes, ready]
+        );
+        useEffect(
+            () => (ready && dispatch('toggle-initializers', showInitializers)) || undefined,
+            [dispatch, showInitializers, ready]
+        );
         useEffect(() => (ready && dispatch('toggle-names', showNames)) || undefined, [dispatch, showNames, ready]);
-        useEffect(() => (ready && dispatch('toggle-direction', horizontal)) || undefined, [
-            dispatch,
-            horizontal,
-            ready
-        ]);
+        useEffect(
+            () => (ready && dispatch('toggle-direction', horizontal)) || undefined,
+            [dispatch, horizontal, ready]
+        );
 
         useEffect(() => (ready && dispatch('toggle-theme', theme)) || undefined, [dispatch, theme, ready]);
 

diff --git a/frontend/packages/core/src/components/HighDimensionalPage/ChartOperations.tsx b/frontend/packages/core/src/components/HighDimensionalPage/ChartOperations.tsx
@@ -48,20 +48,31 @@ const Operations = styled.div`
             }
         }
 
-        & + a {
-            > span {
-                border-left: 1px solid var(--border-color);
-            }
+        & + a > span {
+            border-left: 1px solid var(--border-color);
         }
 
-        &:hover,
-        &.active {
+        &:hover {
             color: var(--primary-focused-color);
         }
 
         &:active {
             color: var(--primary-active-color);
         }
+
+        &.active {
+            background-color: var(--primary-color);
+            color: var(--primary-text-color);
+
+            &:hover,
+            &:active {
+                color: var(--primary-text-color);
+            }
+
+            + a > span {
+                border-left-color: transparent;
+            }
+        }
     }
 `;
 

diff --git a/frontend/packages/core/src/components/HighDimensionalPage/HighDimensionalChart.tsx b/frontend/packages/core/src/components/HighDimensionalPage/HighDimensionalChart.tsx
@@ -120,9 +120,10 @@ const HighDimensionalChart = React.forwardRef<HighDimensionalChartRef, HighDimen
         const [width, setWidth] = useState(0);
         const [height, setHeight] = useState(0);
         const [showLabelCloud, setShowLabelCloud] = useState(false);
-        const chartType = useMemo<ScatterChartProps['type']>(() => (showLabelCloud ? 'labels' : 'points'), [
-            showLabelCloud
-        ]);
+        const chartType = useMemo<ScatterChartProps['type']>(
+            () => (showLabelCloud ? 'labels' : 'points'),
+            [showLabelCloud]
+        );
 
         useLayoutEffect(() => {
             const c = chartElement.current;

diff --git a/frontend/packages/core/src/components/HistogramPage/HistogramChart.tsx b/frontend/packages/core/src/components/HistogramPage/HistogramChart.tsx
@@ -91,13 +91,13 @@ const HistogramChart: FunctionComponent<HistogramChartProps> = ({run, tag, mode,
 
     const echart = useRef<LineChartRef | StackChartRef>(null);
 
-    const {data: dataset, error, loading} = useRunningRequest<HistogramData>(
-        `/histogram/list?${queryString.stringify({run: run.label, tag})}`,
-        !!running,
-        {
-            refreshInterval: 60 * 1000
-        }
-    );
+    const {
+        data: dataset,
+        error,
+        loading
+    } = useRunningRequest<HistogramData>(`/histogram/list?${queryString.stringify({run: run.label, tag})}`, !!running, {
+        refreshInterval: 60 * 1000
+    });
 
     const [maximized, setMaximized] = useState<boolean>(false);
 

diff --git a/frontend/packages/core/src/components/HyperParameterPage/IndicatorFilter/IndicatorFilter.tsx b/frontend/packages/core/src/components/HyperParameterPage/IndicatorFilter/IndicatorFilter.tsx
@@ -47,10 +47,10 @@ const IndicatorFilter: FunctionComponent<IndicatorFilterProps> = ({indicators, o
     );
     const [dataType, setDataType] = useState<IndicatorGroup>('hparams');
 
-    const indicatorsInGroup = useMemo(() => indicators.filter(indicator => indicator.group === dataType), [
-        dataType,
-        indicators
-    ]);
+    const indicatorsInGroup = useMemo(
+        () => indicators.filter(indicator => indicator.group === dataType),
+        [dataType, indicators]
+    );
 
     const [result, setResult] = useState(indicators);
     useEffect(() => setResult(indicators), [indicators]);

diff --git a/...core/src/components/HyperParameterPage/ScatterPlotMatrixView/ScatterChart/ScatterChart.ts b/...core/src/components/HyperParameterPage/ScatterPlotMatrixView/ScatterChart/ScatterChart.ts
@@ -455,17 +455,16 @@ export default class ScatterChart extends EventEmitter<EventTypes> {
 
     setScaleMethod(scaleMethod: [ScaleMethod | null, ScaleMethod | null]) {
         this.scaleMethod = scaleMethod;
+        this.brushedIndexes = null;
+        this.brush.clear(this.svg.select('.brush'));
         this.draw();
         this.colorizeDots();
         this.scaleDots();
-        this.drawSelectedDot();
     }
 
     render(data: Point[], type: [IndicatorType, IndicatorType]) {
         this.hoveredIndex = null;
         this.selectedIndex = null;
-        this.brushedIndexes = [];
-        this.brush.clear(this.svg.select('.brush'));
 
         this.data = data;
         this.type = type;

diff --git a/frontend/packages/core/src/components/HyperParameterPage/TableView/Table.tsx b/frontend/packages/core/src/components/HyperParameterPage/TableView/Table.tsx
@@ -259,7 +259,11 @@ const TableViewTable: FunctionComponent<TableViewTableProps> = ({
         <DndProvider backend={HTML5Backend}>
             <Table
                 {...getTableProps({
-                    className: tableClassNames
+                    className: tableClassNames,
+                    style: {
+                        // sticky table doesn't need min-width in table style
+                        minWidth: 'unset'
+                    }
                 })}
                 ref={table}
             >