fix: error when same tags in one chart in scalar page (#1025)

* chore: fix typo

* chore: update dependencies

* fix: error when same tags in one chart in scalar page

CHANGELOG.md

@@ -24,7 +24,7 @@ This is the Changelog for the VisualDL 2.0 project.
 
 - Bug Fixes
     - **FE**: Fix link error in error pages (#973)
-    - **BE**: Update VDL.service 的链接 (#976)
+    - **BE**: Update endpoint of VDL.service (#976)
     - **FE**: Fix extrema cannot display in some cases in scalar page (#981)
     - **FE**: Fix WallTime display error in scalar page (#998)
     - **FE**: Fix axis range calculation error in scalar page (#998)

frontend/package.json

@@ -46,19 +46,19 @@
         "version": "yarn format && git add -A"
     },
     "devDependencies": {
-        "@typescript-eslint/eslint-plugin": "4.29.2",
-        "@typescript-eslint/parser": "4.29.2",
+        "@typescript-eslint/eslint-plugin": "4.30.0",
+        "@typescript-eslint/parser": "4.30.0",
         "eslint": "7.32.0",
         "eslint-config-prettier": "8.3.0",
         "eslint-plugin-license-header": "0.2.0",
-        "eslint-plugin-prettier": "3.4.1",
-        "eslint-plugin-react": "7.24.0",
+        "eslint-plugin-prettier": "4.0.0",
+        "eslint-plugin-react": "7.25.1",
         "eslint-plugin-react-hooks": "4.2.0",
         "lerna": "4.0.0",
         "lint-staged": "11.1.2",
         "prettier": "2.3.2",
         "rimraf": "3.0.2",
-        "typescript": "4.3.5",
+        "typescript": "4.4.2",
         "yarn": "1.22.11"
     },
     "engines": {

frontend/packages/core/package.json

@@ -50,7 +50,7 @@
         "echarts-gl": "1.1.2",
         "eventemitter3": "4.0.7",
         "file-saver": "2.0.5",
-        "i18next": "20.4.0",
+        "i18next": "20.6.0",
         "i18next-browser-languagedetector": "6.1.2",
         "i18next-fetch-backend": "3.0.0",
         "jszip": "3.7.1",
@@ -70,23 +70,23 @@
         "react-i18next": "11.11.4",
         "react-input-range": "1.3.0",
         "react-rangeslider": "2.2.0",
-        "react-redux": "7.2.4",
-        "react-router-dom": "5.2.0",
+        "react-redux": "7.2.5",
+        "react-router-dom": "5.3.0",
         "react-spinners": "0.11.0",
         "react-table": "7.7.0",
         "react-table-sticky": "1.1.3",
-        "react-toastify": "7.0.4",
+        "react-toastify": "8.0.2",
         "redux": "4.1.1",
-        "styled-components": "5.3.0",
-        "swr": "0.5.6",
-        "three": "0.131.3",
+        "styled-components": "5.3.1",
+        "swr": "1.0.1",
+        "three": "0.132.2",
         "tippy.js": "6.3.1",
         "umap-js": "1.3.3"
     },
     "devDependencies": {
         "@baiducloud/sdk": "1.0.0-rc.31",
         "@simbathesailor/use-what-changed": "2.0.0",
-        "@snowpack/plugin-dotenv": "2.1.0",
+        "@snowpack/plugin-dotenv": "2.2.0",
         "@snowpack/plugin-optimize": "0.2.13",
         "@snowpack/plugin-react-refresh": "2.5.0",
         "@snowpack/plugin-typescript": "1.2.1",
@@ -101,7 +101,7 @@
         "@types/mime-types": "2.1.1",
         "@types/nprogress": "0.2.0",
         "@types/numeric": "1.2.2",
-        "@types/react": "17.0.19",
+        "@types/react": "17.0.20",
         "@types/react-dom": "17.0.9",
         "@types/react-helmet": "6.1.2",
         "@types/react-rangeslider": "2.2.4",
@@ -109,18 +109,18 @@
         "@types/react-router-dom": "5.1.8",
         "@types/react-table": "7.7.2",
         "@types/snowpack-env": "2.3.4",
-        "@types/styled-components": "5.1.12",
+        "@types/styled-components": "5.1.14",
         "@types/three": "0.131.0",
         "@visualdl/mock": "2.2.1",
-        "@web/test-runner": "0.13.16",
+        "@web/test-runner": "0.13.17",
         "chai": "4.3.4",
         "chalk": "4.1.2",
         "dotenv": "10.0.0",
         "enhanced-resolve": "5.8.2",
         "html-minifier": "4.0.0",
-        "snowpack": "3.8.6",
+        "snowpack": "3.8.8",
         "snowpack-plugin-copy": "1.0.1",
-        "typescript": "4.3.5"
+        "typescript": "4.4.2"
     },
     "engines": {
         "node": ">=14",

frontend/packages/core/snowpack.config.js

@@ -111,7 +111,7 @@ export default {
     },
     packageOptions: {
         polyfillNode: true,
-        knownEntrypoints: ['chai', '@testing-library/react', 'fetch-mock/esm/client']
+        knownEntrypoints: ['chai', '@testing-library/react', 'fetch-mock/esm/client', 'react-is']
     },
     buildOptions: {
         out: 'dist',

frontend/packages/core/src/components/GraphPage/Graph.tsx

@@ -177,7 +177,7 @@ const Graph = React.forwardRef<GraphRef, GraphProps>(
                         case 'cancel':
                             return setLoading(false);
                         case 'error':
-                            toast(data);
+                            toast.error(data);
                             setLoading(false);
                             return;
                         case 'show-model-properties':

frontend/packages/core/src/components/ScalarPage/ScalarChart.tsx

@@ -15,7 +15,7 @@
  */
 
 import type {Dataset, Range, ScalarDataset} from '~/resource/scalar';
-import React, {FunctionComponent, useCallback, useMemo} from 'react';
+import React, {FunctionComponent, useCallback, useEffect, useMemo, useState} from 'react';
 import SChart, {DownloadDataTypes, chartSize, chartSizeInRem} from '~/components/ScalarChart';
 import {
     SortingMethod,
@@ -124,8 +124,10 @@ const ScalarChart: FunctionComponent<ScalarChartProps> = ({
         return {x, y};
     }, [smoothedDatasets, yRange, xAxisType, xAxis]);
 
-    const data = useMemo(
-        () =>
+    const [data, setData] = useState<ReturnType<typeof chartData>>([]);
+    useEffect(() => {
+        if (smoothedDatasets.length === runs.length && datasets.length === runs.length) {
+            setData(
                 chartData({
                     data: smoothedDatasets,
                     rawData: datasets,
@@ -133,9 +135,10 @@ const ScalarChart: FunctionComponent<ScalarChartProps> = ({
                     runs,
                     xAxis,
                     smoothedOnly
-            }),
-        [smoothedDatasets, datasets, showMostValue, datasetRanges, runs, xAxis, smoothedOnly]
+                })
             );
+        }
+    }, [smoothedDatasets, datasets, showMostValue, datasetRanges, runs, xAxis, smoothedOnly]);
 
     const maxStepLength = useMemo(
         () => String(Math.max(...smoothedDatasets.map(i => Math.max(...i.map(j => j[1]))))).length,

frontend/packages/core/src/hooks/useRequest.ts

@@ -56,10 +56,7 @@ function useRequest<D = unknown, E extends Error = Error>(
 
     useEffect(() => {
         if (error) {
-            toast(error.message, {
-                position: toast.POSITION.TOP_CENTER,
-                type: toast.TYPE.ERROR
-            });
+            toast.error(error.message);
         }
     }, [error]);
 

frontend/packages/core/src/hooks/useTagFilter.ts

@@ -21,13 +21,13 @@ import {useCallback, useEffect, useMemo, useReducer} from 'react';
 import {useDispatch, useSelector} from 'react-redux';
 
 import type {Page} from '~/store/runs/types';
-import {cache} from 'swr';
 import groupBy from 'lodash/groupBy';
 import intersection from 'lodash/intersection';
 import intersectionBy from 'lodash/intersectionBy';
 import uniq from 'lodash/uniq';
 import useQuery from '~/hooks/useQuery';
 import {useRunningRequest} from '~/hooks/useRequest';
+import {useSWRConfig} from 'swr';
 
 type Tags = Record<string, string[]>;
 
@@ -183,7 +183,8 @@ const useTagFilter = (type: Page, running: boolean) => {
     const {data, loading, error} = useRunningRequest<TagsData>(`/${type}/tags`, running);
 
     // clear cache in order to fully reload data when switching page
-    useEffect(() => () => cache.delete(`/${type}/tags`), [type]);
+    const {cache} = useSWRConfig();
+    useEffect(() => () => cache.delete(`/${type}/tags`), [type, cache]);
 
     const storeDispatch = useDispatch();
     const selector = useMemo(() => selectors.runs.getRunsByPage(type), [type]);

frontend/packages/core/src/hooks/useWorker.ts

@@ -30,6 +30,7 @@ const useWorker = <D, P = unknown, E extends Error = Error>(name: string, params
     const [result, setResult] = useState<WorkerResult<D, E>>({});
 
     useEffect(() => {
+        setResult({});
         const worker = new WebWorker(`${BASE_URI}/_dist_/worker/${name}.js`);
         worker.on('INITIALIZED', () => {
             setResult({worker});
@@ -41,7 +42,6 @@ const useWorker = <D, P = unknown, E extends Error = Error>(name: string, params
             worker.terminate();
         };
     }, [name, params]);
-
     return result;
 };
 

frontend/packages/core/src/pages/high-dimensional.tsx

@@ -257,9 +257,8 @@ const HighDimensional: FunctionComponent = () => {
     useEffect(() => setVectorFile(null), [selectedEmbeddingName]);
 
     const showError = useCallback((e: Error) => {
-        toast(e.message, {
-            position: toast.POSITION.TOP_CENTER,
-            type: toast.TYPE.ERROR
+        toast.error(e.message, {
+            position: toast.POSITION.TOP_CENTER
         });
         if (MODE !== 'production') {
             // eslint-disable-next-line no-console

frontend/packages/core/src/utils/saveFile.ts

@@ -77,10 +77,10 @@ export default async function (url: string | string[], filename: string | string
             const zipFile = await zip.generateAsync({type: 'blob'});
             saveFile(zipFile, zipFilename);
         }
-    } catch (e) {
-        toast(e.message, {
-            position: toast.POSITION.TOP_CENTER,
-            type: toast.TYPE.ERROR
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    } catch (e: any) {
+        toast.error(e.message, {
+            position: toast.POSITION.TOP_CENTER
         });
     }
 }

frontend/packages/core/src/utils/style.ts

@@ -254,19 +254,6 @@ export const GlobalStyle = createGlobalStyle`
 
     .Toastify__toast-container {
         z-index: ${zIndexes.toast};
-
-        .Toastify__toast {
-            border-radius: ${borderRadius};
-        }
-
-        .Toastify__toast--default {
-            color: var(--text-color);
-            ${transitionProps('color')}
-        }
-
-        .Toastify__toast-body {
-            padding: 0 1.428571429em;
-        }
     }
 
     [data-tippy-root] .tippy-box {

frontend/packages/core/src/worker/utils.ts

@@ -68,7 +68,8 @@ export function callListener<T>(this: IWorker, listeners: Listeners, data: Worke
     listeners[data.type]?.forEach(handler => {
         try {
             handler(data.data);
-        } catch (e) {
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        } catch (e: any) {
             const error = e instanceof Error ? e : new Error(e);
             this.emit('ERROR', error);
         }

frontend/packages/core/src/worker/wasm.ts

@@ -29,7 +29,8 @@ const runner: Runner = async worker => {
             // eslint-disable-next-line @typescript-eslint/ban-types
             const result = (funcs[name] as Function)(...params);
             worker.emit('RESULT', result);
-        } catch (e) {
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        } catch (e: any) {
             if (e.message !== 'unreachable') {
                 throw e;
             }

frontend/packages/demo/package.json

@@ -35,17 +35,17 @@
     "devDependencies": {
         "@types/express": "4.17.13",
         "@types/mkdirp": "1.0.2",
-        "@types/node": "16.7.1",
-        "@types/node-fetch": "2.5.12",
+        "@types/node": "16.7.10",
+        "@types/node-fetch": "3.0.3",
         "@types/rimraf": "3.0.2",
         "cpy-cli": "3.1.1",
         "get-port": "5.1.1",
         "mime-types": "2.1.32",
         "mkdirp": "1.0.4",
-        "node-fetch": "2.6.1",
+        "node-fetch": "3.0.0",
         "rimraf": "3.0.2",
         "ts-node": "10.2.1",
-        "typescript": "4.3.5"
+        "typescript": "4.4.2"
     },
     "peerDependencies": {
         "express": "^4.17.1"

frontend/packages/icons/package.json

@@ -37,14 +37,14 @@
         "test": "echo \"Error: no test specified\" && exit 0"
     },
     "devDependencies": {
-        "@babel/core": "7.15.0",
+        "@babel/core": "7.15.5",
         "@babel/preset-react": "7.14.5",
         "@svgr/core": "5.5.0",
         "@svgr/plugin-jsx": "5.5.0",
         "@svgr/plugin-svgo": "5.5.0",
         "camelcase": "6.2.0",
         "fs-extra": "10.0.0",
-        "svgo": "2.4.0"
+        "svgo": "2.5.0"
     },
     "peerDependencies": {
         "react": "^16.0.0 || ^17.0.0"

frontend/packages/netron/package.json

@@ -40,18 +40,18 @@
         "pako": "1.0.11"
     },
     "devDependencies": {
-        "autoprefixer": "10.3.1",
+        "autoprefixer": "10.3.4",
         "copy-webpack-plugin": "9.0.1",
         "css-loader": "6.2.0",
         "html-webpack-plugin": "5.3.2",
-        "mini-css-extract-plugin": "2.2.0",
+        "mini-css-extract-plugin": "2.2.2",
         "postcss": "8.3.6",
         "postcss-loader": "6.1.1",
         "rimraf": "3.0.2",
-        "sass": "1.38.0",
+        "sass": "1.39.0",
         "sass-loader": "12.1.0",
-        "terser": "5.7.1",
-        "webpack": "5.51.1",
+        "terser": "5.7.2",
+        "webpack": "5.52.0",
         "webpack-cli": "4.8.0"
     },
     "engines": {

frontend/packages/server/package.json

@@ -46,12 +46,12 @@
     "devDependencies": {
         "@types/enhanced-resolve": "3.0.7",
         "@types/express": "4.17.13",
-        "@types/node": "16.7.1",
+        "@types/node": "16.7.10",
         "@visualdl/mock": "2.2.1",
         "cross-env": "7.0.3",
         "nodemon": "2.0.12",
         "ts-node": "10.2.1",
-        "typescript": "4.3.5"
+        "typescript": "4.4.2"
     },
     "optionalDependencies": {
         "@visualdl/demo": "2.2.1"