chore: use yarn workspaces to disassembly dependencies (#612)

* resolve server rename conflict

* feat: add running toggle stopped color

* feat: revalidate runs and tags when refreshing

* fix: make language optional

* fix: language before open_browser

* fix: scalar chart x axis value overflow

* fix: unnecessary param when cli stop

* build: customize navbar items when build

* chore: use yarn workspaces to disassembly dependencies

* fix: add missing test script

* build: update dependencies

* build: install yarn before build

* build: fix test script error

* build: remove NODE_ENV when build

* build: add wine to build windows app in linux

* build: disable app publish by default

* build: introduce lerna

* build: adapter new frontend

* build: exact version when publish

.travis.yml

@@ -63,14 +63,15 @@ jobs:
         - npm
         - yarn
         - cargo
-      env:
-        - PUBLIC_PATH="/app"
-        - API_URL="/api"
       before_install:
         - cd frontend
       install:
         - ./scripts/install.sh
+      before_script:
+        - source $HOME/.cargo/env
+        - export PATH="$HOME/.yarn/bin:$HOME/.config/yarn/global/node_modules/.bin:$PATH"
       script:
+        - yarn clean
         - yarn lint
         - yarn test
         - yarn build

frontend/.eslintrc.js

@@ -4,35 +4,60 @@ module.exports = {
         es6: true,
         node: true
     },
-    extends: [
-        'plugin:@typescript-eslint/recommended',
-        'plugin:react/recommended',
-        'prettier/@typescript-eslint',
-        'plugin:prettier/recommended'
-    ],
-    parser: '@typescript-eslint/parser',
+    extends: ['plugin:prettier/recommended'],
     parserOptions: {
-        ecmaFeatures: {
-            jsx: true
-        },
         ecmaVersion: 2018,
         sourceType: 'module'
     },
-    plugins: ['react-hooks'],
-    settings: {
-        react: {
-            version: 'detect'
-        }
-    },
-    ignorePatterns: ['node_modules/', 'dist/', 'out/', '_next', 'wasm/'],
+    ignorePatterns: ['node_modules/', 'dist/', 'output/', '_next'],
     rules: {
-        '@typescript-eslint/explicit-function-return-type': 'off',
-        '@typescript-eslint/no-explicit-any': 'error',
-        'react/prop-types': 'off',
-        'react/react-in-jsx-scope': 'off',
-        'react-hooks/rules-of-hooks': 'error',
-        'react-hooks/exhaustive-deps': 'warn',
         'no-console': 'warn',
         'sort-imports': 'error'
-    }
+    },
+    overrides: [
+        {
+            files: ['packages/cli/**/*', 'packages/mock/**/*', 'packages/server/**/*', 'packages/serverless/**/*'],
+            extends: [
+                'plugin:@typescript-eslint/recommended',
+                'prettier/@typescript-eslint',
+                'plugin:prettier/recommended'
+            ],
+            parser: '@typescript-eslint/parser',
+            rules: {
+                '@typescript-eslint/explicit-function-return-type': 'off',
+                '@typescript-eslint/no-explicit-any': 'error'
+            }
+        },
+        {
+            files: ['packages/core/**/*', 'packages/i18n/**/*'],
+            extends: [
+                'plugin:@typescript-eslint/recommended',
+                'plugin:react/recommended',
+                'prettier/@typescript-eslint',
+                'plugin:prettier/recommended'
+            ],
+            parser: '@typescript-eslint/parser',
+            parserOptions: {
+                ecmaFeatures: {
+                    jsx: true
+                },
+                ecmaVersion: 2018,
+                sourceType: 'module'
+            },
+            plugins: ['react-hooks'],
+            settings: {
+                react: {
+                    version: 'detect'
+                }
+            },
+            rules: {
+                '@typescript-eslint/explicit-function-return-type': 'off',
+                '@typescript-eslint/no-explicit-any': 'error',
+                'react/prop-types': 'off',
+                'react/react-in-jsx-scope': 'off',
+                'react-hooks/rules-of-hooks': 'error',
+                'react-hooks/exhaustive-deps': 'warn'
+            }
+        }
+    ]
 };

frontend/.gitignore

 # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 
 # dependencies
-/node_modules
-/.pnp
+node_modules
+.pnp
 .pnp.js
 
 # testing
-/coverage
+coverage
 
 # next.js
-/.next/
-/serverless/
+.next
 
 # production
-/build
-/dist
+build
+dist
 
 # misc
 .DS_Store
@@ -25,6 +24,7 @@
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+lerna-debug.log*
 
 # output
-/output/
+/output

frontend/.prettierignore

 dist
-serverless
+out
 wasm
 output

frontend/Dockerfile

-FROM node:12-alpine
-
-# Create app directory
-WORKDIR /usr/src/app
-
-ENV NODE_ENV production
-ENV PORT 8999
-ENV HOST 0.0.0.0
-
-COPY package.json .
-COPY yarn.lock .
-
-RUN yarn install --frozen-lockfile
-
-COPY dist dist
-COPY public public
-COPY ecosystem.config.js ecosystem.config.js
-
-EXPOSE 8999
-ENTRYPOINT ["yarn", "start"]

frontend/LICENSE

+../LICENSE
\ No newline at end of file

frontend/lerna.json

+{
+    "packages": [
+        "packages/*"
+    ],
+    "version": "2.0.0-beta.32",
+    "npmClient": "yarn",
+    "useWorkspaces": true,
+    "command": {
+        "version": {
+            "exact": true
+        },
+        "publish": {
+            "exact": true
+        }
+    }
+}

frontend/lint-staged.config.js

+const path = require('path');
+
 module.exports = {
-    '**/*.ts?(x)': () => ['tsc -p tsconfig.json --noEmit', 'tsc -p server/tsconfig.json --noEmit'],
+    '**/*.ts?(x)': async filenames =>
+        [
+            ...new Set(
+                filenames.map(
+                    filename => path.relative(path.join(process.cwd(), 'packages'), filename).split(path.sep)[0]
+                )
+            )
+        ].map(p => `tsc -p ${path.join(process.cwd(), 'packages', p, 'tsconfig.json')} --noEmit`),
     '**/*.(j|t)s?(x)': filenames => `eslint ${filenames.join(' ')}`
 };

frontend/package.json

 {
     "name": "visualdl",
+    "private": true,
+    "workspaces": [
+        "packages/*"
+    ],
     "version": "2.0.0-beta.26",
-    "title": "VisualDL",
     "description": "A platform to visualize the deep learning process and result.",
     "keywords": [
         "visualdl",
@@ -24,112 +27,31 @@
         "directory": "frontend"
     },
     "scripts": {
-        "dev": "cross-env NODE_ENV=development nodemon --watch server --ext ts --exec \"ts-node --project server/tsconfig.json\" server/index.ts",
-        "dev:wasm": "cross-env NODE_ENV=development WITH_WASM=1 nodemon --watch server --ext ts --exec \"ts-node --project server/tsconfig.json\" server/index.ts",
-        "build:next": "next build",
-        "build:server": "tsc --project server/tsconfig.json",
-        "build:wasm": "wasm-pack build --release --out-dir dist --out-name index wasm",
         "build": "./scripts/build.sh",
-        "export": "next export -o serverless",
-        "start": "pm2-runtime ecosystem.config.js",
-        "lint": "tsc -p tsconfig.json --noEmit && tsc -p server/tsconfig.json --noEmit && eslint --ext .tsx,.jsx.ts,.js --ignore-path .gitignore .",
+        "clean": "rimraf output */dist wasm/target",
+        "lint": "eslint --ext .tsx,.jsx.ts,.js --ignore-path .gitignore .",
         "format": "prettier --write \"**/*.ts\" \"**/*.tsx\" \"**/*.js\"",
-        "test": "echo \"Error: no test specified\" && exit 0",
-        "prepublishOnly": "yarn lint && yarn test && ./scripts/build.sh",
+        "test": "yarn workspaces run test",
+        "prepublishOnly": "yarn lint && yarn test && yarn build",
         "preversion": "yarn lint",
         "version": "yarn format && git add -A"
     },
-    "bin": "cli.js",
-    "files": [
-        "dist",
-        "serverless",
-        "public",
-        "wasm/dist",
-        "types",
-        "index.js",
-        "cli.js",
-        "ecosystem.config.js"
-    ],
-    "dependencies": {
-        "bignumber.js": "9.0.0",
-        "dagre-d3": "0.6.4",
-        "detect-node": "2.0.4",
-        "echarts": "4.7.0",
-        "echarts-gl": "1.1.1",
-        "express": "4.17.1",
-        "hoist-non-react-statics": "3.3.2",
-        "http-proxy-middleware": "1.0.3",
-        "i18next": "19.3.3",
-        "i18next-browser-languagedetector": "4.0.2",
-        "i18next-express-middleware": "1.9.1",
-        "i18next-node-fs-backend": "2.1.3",
-        "i18next-xhr-backend": "3.2.2",
-        "isomorphic-unfetch": "3.0.0",
-        "lodash": "4.17.15",
-        "moment": "2.24.0",
-        "next": "9.3.1",
-        "nprogress": "0.2.0",
-        "open": "7.0.3",
-        "ora": "4.0.3",
-        "path-match": "1.2.4",
-        "pm2": "4.2.3",
-        "polished": "3.5.1",
-        "prop-types": "15.7.2",
-        "query-string": "6.11.1",
-        "react": "16.13.1",
-        "react-dom": "16.13.1",
-        "react-hooks-worker": "0.9.0",
-        "react-i18next": "11.3.4",
-        "react-input-range": "1.3.0",
-        "react-is": "16.13.1",
-        "react-spinners": "0.8.1",
-        "save-svg-as-png": "1.4.17",
-        "styled-components": "5.0.1",
-        "swr": "0.1.18",
-        "url": "0.11.0",
-        "yargs": "15.3.1"
-    },
     "devDependencies": {
-        "@babel/core": "7.9.0",
-        "@types/d3": "5.7.2",
-        "@types/dagre-d3": "^0.4.39",
-        "@types/echarts": "4.4.3",
-        "@types/express": "4.17.3",
-        "@types/faker": "4.1.10",
-        "@types/lodash": "4.14.149",
-        "@types/node": "13.9.3",
-        "@types/nprogress": "0.2.0",
-        "@types/react": "16.9.25",
-        "@types/react-dom": "16.9.5",
-        "@types/styled-components": "5.0.1",
-        "@types/webpack": "4.41.8",
-        "@types/yargs": "15.0.4",
-        "@typescript-eslint/eslint-plugin": "2.25.0",
-        "@typescript-eslint/parser": "2.25.0",
-        "@wasm-tool/wasm-pack-plugin": "1.2.0",
-        "babel-plugin-emotion": "10.0.29",
-        "babel-plugin-styled-components": "1.10.7",
-        "babel-plugin-typescript-to-proptypes": "1.3.2",
-        "core-js": "3",
-        "cross-env": "7.0.2",
+        "@typescript-eslint/eslint-plugin": "2.27.0",
+        "@typescript-eslint/parser": "2.27.0",
         "eslint": "6.8.0",
         "eslint-config-prettier": "6.10.1",
         "eslint-plugin-prettier": "3.1.2",
         "eslint-plugin-react": "7.19.0",
-        "eslint-plugin-react-hooks": "2.5.1",
-        "faker": "4.1.0",
+        "eslint-plugin-react-hooks": "3.0.0",
         "husky": "4.2.3",
-        "lint-staged": "10.0.9",
-        "nodemon": "2.0.2",
-        "prettier": "2.0.2",
-        "ts-node": "8.8.1",
+        "lerna": "^3.20.2",
+        "lint-staged": "10.1.2",
+        "prettier": "2.0.4",
+        "rimraf": "3.0.2",
         "typescript": "3.8.3",
-        "worker-plugin": "4.0.2",
         "yarn": "1.22.4"
     },
-    "optionalDependencies": {
-        "wasm-pack": "0.9.1"
-    },
     "engines": {
         "node": ">=10",
         "npm": ">=6"

frontend/packages/app/LICENSE

+../../../LICENSE
\ No newline at end of file

frontend/packages/app/electron-builder.yml

+appId: org.paddlepaddle.visualdl
+productName: VisualDL
+files:
+    - 'index.js'
+    - 'resources/**/*'
+directories:
+    buildResources: ./resources
+mac:
+    category: public.app-category.developer-tools
+    darkModeSupport: false
+    hardenedRuntime: true
+    gatekeeperAssess: false
+    target:
+        - zip
+win:
+    target:
+        - nsis
+    verifyUpdateCodeSignature: false
+linux:
+    target:
+        - AppImage
+nsis:
+    perMachine: true
+publish: null

frontend/packages/app/index.js

+/* eslint-disable no-console */
+/* eslint-disable @typescript-eslint/no-var-requires */
+
+const path = require('path');
+const http = require('http');
+const {app, BrowserWindow, screen, nativeImage} = require('electron');
+const pm2 = require('pm2');
+
+const host = 'localhost';
+
+async function getPort() {
+    return new Promise((resolve, reject) => {
+        const server = http.createServer();
+        server.listen(0);
+        server.on('listening', () => {
+            resolve(server.address().port);
+            server.close();
+        });
+        server.on('error', reject);
+    });
+}
+
+async function createWindow() {
+    const {width, height} = screen.getPrimaryDisplay().workAreaSize;
+
+    const win = new BrowserWindow({
+        minWidth: 800,
+        minHeight: 600,
+        width,
+        height,
+        icon: nativeImage.createFromPath(path.join(__dirname, 'resources/icon.png')),
+        webPreferences: {
+            devTools: false,
+            nodeIntegration: true
+        },
+        show: false
+    });
+
+    win.once('ready-to-show', () => {
+        win.show();
+    });
+
+    return win;
+}
+
+function startServer({port, host}) {
+    return new Promise((resolve, reject) => {
+        pm2.connect(err => {
+            if (err) {
+                reject(err);
+            }
+            const app = require('@visualdl/server/ecosystem.config').apps[0];
+            pm2.start(
+                {
+                    ...app,
+                    instances: 1,
+                    env: {
+                        ...app.env,
+                        HOST: host,
+                        PORT: port,
+                        BACKEND: 'http://127.0.0.1:8040'
+                    }
+                },
+                err => {
+                    pm2.disconnect();
+                    if (err) {
+                        reject(err);
+                    } else {
+                        console.log(`Server listening at http://${host}:${port}`);
+                        resolve();
+                    }
+                }
+            );
+        });
+    });
+}
+
+function stopServer() {
+    return new Promise((resolve, reject) => {
+        pm2.connect(err => {
+            if (err) {
+                reject(err);
+            }
+            pm2.killDaemon(err => {
+                pm2.disconnect();
+                if (err) {
+                    reject(err);
+                } else {
+                    console.log('Server stopped');
+                    resolve();
+                }
+            });
+        });
+    });
+}
+
+app.on('ready', async () => {
+    let port = 0;
+    try {
+        port = await getPort();
+        await startServer({port, host});
+    } catch (e) {
+        console.error(e);
+        app.exit(1);
+        return;
+    }
+
+    try {
+        const win = await createWindow();
+        win.loadURL(`http://${host}:${port}`);
+    } catch (e) {
+        console.error(e);
+        app.exit(1);
+    }
+});
+
+// app.on('activate', async () => {
+//     if (BrowserWindow.getAllWindows().length === 0) {
+//         try {
+//             await createWindow();
+//         } catch (e) {
+//             console.error(e);
+//             app.exit(1);
+//         }
+//     }
+// });
+
+// Quit when all windows are closed.
+app.on('window-all-closed', () => {
+    app.quit();
+    // if (process.platform !== 'darwin') {
+    //     app.quit();
+    // }
+});
+
+app.on('will-quit', async event => {
+    event.preventDefault();
+    try {
+        await stopServer();
+        app.exit(0);
+    } catch (e) {
+        console.error(e);
+        app.exit(1);
+    }
+});

frontend/packages/app/package.json

+{
+    "name": "@visualdl/app",
+    "version": "2.0.0-beta.32",
+    "private": true,
+    "description": "A platform to visualize the deep learning process and result.",
+    "keywords": [
+        "visualdl",
+        "paddlepaddle",
+        "visualization",
+        "deep learning"
+    ],
+    "homepage": "https://github.com/PaddlePaddle/VisualDL",
+    "bugs": {
+        "url": "https://github.com/PaddlePaddle/VisualDL/issues"
+    },
+    "license": "Apache-2.0",
+    "author": "PeterPanZH <littlepanzh@gmail.com> (https://github.com/PeterPanZH)",
+    "contributors": [
+        "Niandalu <littlepanzh@gmail.com> (https://github.com/Niandalu)"
+    ],
+    "repository": {
+        "type": "git",
+        "url": "https://github.com/PaddlePaddle/VisualDL.git",
+        "directory": "frontend/app"
+    },
+    "scripts": {
+        "dev": "electron index.js",
+        "build": "electron-builder -mwl",
+        "test": "echo \"Error: no test specified\" && exit 0"
+    },
+    "dependencies": {
+        "@visualdl/server": "^2.0.0-beta.32",
+        "pm2": "4.2.3"
+    },
+    "devDependencies": {
+        "electron": "8.2.1",
+        "electron-builder": "22.4.1"
+    },
+    "engines": {
+        "node": ">=10",
+        "npm": ">=6"
+    },
+    "publishConfig": {
+        "access": "public"
+    },
+    "husky": {
+        "hooks": {
+            "pre-commit": "lint-staged"
+        }
+    }
+}

frontend/packages/app/resources/logo.svg

+<svg height="31" viewBox="0 0 50 31" width="50" xmlns="http://www.w3.org/2000/svg"><g fill="#fff" fill-rule="evenodd" transform="translate(0 .0625)"><path d="m2.446115.0742695c-1.32588958 0-2.40434375 1.0740707-2.40434375 2.39411403s1.07845417 2.39382156 2.40434375 2.39382156 2.40434375-1.07377823 2.40434375-2.39382156-1.07845417-2.39411403-2.40434375-2.39411403" transform="translate(23.010417 .023203)"/><path d="m.23204292 23.3006269h3.46595625c.06922708 0 .13199166-.0401668.16068125-.1029517l10.45446458-22.89241762c.0531687-.1163081-.0322146-.24831243-.1605833-.24831243h-3.4659563c-.0691292 0-.1318937.04026424-.1605833.10295168l-10.45456252 22.89241757c-.05307083.1163081.0323125.2483125.16058334.2483125" transform="translate(24.0875 6.652667)"/><path d="m2.48757292.0742695c-1.32588959 0-2.40434375 1.0740707-2.40434375 2.39411403s1.07845416 2.39382156 2.40434375 2.39382156c1.32588958 0 2.40434375-1.07377823 2.40434375-2.39382156s-1.07845417-2.39411403-2.40434375-2.39411403" transform="translate(43.866667 .023203)"/><path d="m17.4206283.05694515h-3.4659562c-.0691292 0-.1318938.04026424-.1605834.10304917l-4.08253745 8.93954011h-8.13765833c-.1075125 0-.2050375.06278493-.24900209.16047204l-1.31139791 2.91052983c-.04513959.1002219.02849375.2135077.13884583.2135077h8.05922708l-4.87203958 10.6682704c-.05307083.1163081.0323125.2483125.16058333.2483125h3.46595625c.06922709 0 .13199167-.0401668.16058334-.1029517l10.45456253-22.89241762c.0531687-.1163081-.0322146-.24831243-.1605834-.24831243" transform="translate(0 6.652667)"/><path d="m29.3354319 12.1665001c-.3381063-2.99856519-2.8049209-5.35027016-5.8800917-5.45507419-.0279062-.00107241-.0550292.00302226-.0813687.00887179-.0140021-.0049721-.0284938-.00887179-.0441605-.00887179h-2.1002145c-.0522875 0-.0995813.03032005-.121123.07779872l-1.2130895 2.67576877c-.0396563.08754793.0247729.18679491.1211229.18679491h2.1414375c.4538437-.00653197.7861729.02330061 1.1568854.08062598 1.7253896.26693343 2.7979687 1.52672661 2.7732937 3.19686421-.0235 1.5783974-1.3395979 2.8354608-2.9250645 2.8354608h-7.669225c-.1306209 0-.2491.0760439-.3029542.1943018l-1.2729167 2.7896396c-.0615896.1347341.0376.2880892.1863354.2880892h8.9637813c3.7159375 0 6.6818333-3.1934519 6.2673521-6.8702698"/><path d="m50.1567746 12.1665001c-.3381063-2.99856519-2.8049209-5.35027016-5.8801896-5.45507419-.0279063-.00107241-.0549313.00302226-.0813688.00887179-.0139041-.0049721-.0283958-.00887179-.0440625-.00887179h-2.1003125c-.0521895 0-.0995812.03032005-.1211229.07779872l-1.2130896 2.67576877c-.0395583.08754793.024675.18679491.1212209.18679491h2.1413396c.4539416-.00653197.7862708.02330061 1.1569833.08062598 1.7252917.26693343 2.7978708 1.52672661 2.7731958 3.19686421-.0235 1.5783974-1.3395979 2.8354608-2.9250646 2.8354608h-7.669127c-.1306209 0-.2491.0760439-.3030521.1943018l-1.2729167 2.7896396c-.0614916.1347341.0376979.2880892.1863354.2880892h8.9638792c3.7158396 0 6.6817354-3.1934519 6.2673521-6.8702698"/></g></svg>
\ No newline at end of file

frontend/packages/cli/LICENSE

+../../../LICENSE
\ No newline at end of file

frontend/cli.js → frontend/packages/cli/index.ts

@@ -2,6 +2,13 @@
 
 /* eslint-disable @typescript-eslint/no-var-requires */
 /* eslint-disable no-console */
+
+import ora, {Ora} from 'ora';
+import ecosystem from '@visualdl/server/ecosystem.config';
+import pm2 from 'pm2';
+
+const app = ecosystem.apps[0];
+
 const argv = require('yargs')
     .usage('Usage: $0 <command> [options]')
     .command('start', 'Start VisualDL server')
@@ -22,7 +29,6 @@ const argv = require('yargs')
     .describe('b', 'Backend API address')
     .boolean('open')
     .describe('open', 'Open browser when server is ready')
-    .demandOption(['b'])
     .help('h')
     .alias('h', 'help')
     .epilog('Visit https://github.com/PaddlePaddle/VisualDL for more information.').argv;
@@ -34,7 +40,7 @@ const exit = () => {
     process.exit(1);
 };
 
-const exitIfError = (err, exitCode = 1, spinner) => {
+const exitIfError = (err?: Error, exitCode = 1, spinner?: Ora) => {
     if (!err) {
         return;
     }
@@ -64,34 +70,28 @@ const banner = `
 
 `;
 
-const pm2 = require('pm2');
 pm2.connect(err => {
     exitIfError(err, 2);
 
     pm2.list((err, list) => {
         exitIfError(err, 2);
 
-        const ecosystem = require('./ecosystem.config');
-
-        const app = ecosystem.apps[0];
         const host = argv.host || 'localhost';
         const port = Number.parseInt(argv.port, 10) || 8999;
         const url = `http://${host}:${port}`;
 
-        const ora = require('ora');
-
         if (command === 'start') {
             if (list.find(item => item.name === app.name)) {
-                exitIfError('VisualDL server is already running', 1);
+                exitIfError(new Error('VisualDL server is already running'), 1);
             }
             const spinner = ora('Starting VisualDL server...').start();
             pm2.start(
                 {
                     ...app,
                     env: {
-                        NODE_ENV: 'production',
+                        ...app.env,
                         HOST: host,
-                        PORT: port,
+                        PORT: port + '',
                         BACKEND: argv.backend
                     }
                 },
@@ -110,12 +110,12 @@ pm2.connect(err => {
             );
         } else if (command === 'stop') {
             if (!list.find(item => item.name === app.name)) {
-                exitIfError('VisualDL server is not running', 1);
+                exitIfError(new Error('VisualDL server is not running'), 1);
             }
             const spinner = ora('Stopping VisualDL server...').start();
             pm2.delete(app.name, err => {
                 exitIfError(err, 2);
-                const end = err => {
+                const end = (err?: Error) => {
                     pm2.disconnect();
                     exitIfError(err, 2);
 

frontend/packages/cli/package.json

+{
+    "name": "@visualdl/cli",
+    "version": "2.0.0-beta.32",
+    "description": "A platform to visualize the deep learning process and result.",
+    "keywords": [
+        "visualdl",
+        "paddlepaddle",
+        "visualization",
+        "deep learning"
+    ],
+    "homepage": "https://github.com/PaddlePaddle/VisualDL",
+    "bugs": {
+        "url": "https://github.com/PaddlePaddle/VisualDL/issues"
+    },
+    "license": "Apache-2.0",
+    "author": "PeterPanZH <littlepanzh@gmail.com> (https://github.com/PeterPanZH)",
+    "contributors": [
+        "Niandalu <littlepanzh@gmail.com> (https://github.com/Niandalu)"
+    ],
+    "repository": {
+        "type": "git",
+        "url": "https://github.com/PaddlePaddle/VisualDL.git",
+        "directory": "frontend/cli"
+    },
+    "scripts": {
+        "dev": "cross-env NODE_ENV=development ts-node index.ts",
+        "build": "tsc",
+        "start": "node index.js",
+        "test": "echo \"Error: no test specified\" && exit 0"
+    },
+    "bin": "dist/index.js",
+    "types": "dist/index.d.ts",
+    "files": [
+        "dist"
+    ],
+    "dependencies": {
+        "@visualdl/server": "^2.0.0-beta.32",
+        "open": "7.0.3",
+        "ora": "4.0.3",
+        "pm2": "4.2.3",
+        "yargs": "15.3.1"
+    },
+    "devDependencies": {
+        "@types/node": "13.11.0",
+        "@types/yargs": "15.0.4",
+        "cross-env": "7.0.2",
+        "ts-node": "8.8.2",
+        "typescript": "3.8.3"
+    },
+    "engines": {
+        "node": ">=10",
+        "npm": ">=6"
+    },
+    "publishConfig": {
+        "access": "public"
+    },
+    "husky": {
+        "hooks": {
+            "pre-commit": "lint-staged"
+        }
+    },
+    "gitHead": "d9641c770d9bc4037b2f1cb644fba198bd11a752"
+}

frontend/packages/cli/tsconfig.json

+{
+    "compilerOptions": {
+        "target": "es5",
+        "lib": [
+            "esnext",
+            "esnext.asynciterable",
+            "dom"
+        ],
+        "moduleResolution": "node",
+        "esModuleInterop": true,
+        "declaration": true,
+        "skipLibCheck": true,
+        "outDir": "dist"
+    }
+}

frontend/packages/core/.gitignore

+out

frontend/packages/core/.npmignore

+dist
+out

frontend/packages/core/LICENSE

+../../../LICENSE
\ No newline at end of file

frontend/packages/core/build.ts

+/* eslint-disable no-console */
+
+import ora from 'ora';
+import path from 'path';
+import {spawn} from 'child_process';
+import {writeFileSync} from 'fs';
+
+const next = require.resolve('next/dist/bin/next');
+export const projectRoot = path.dirname(require.resolve('@visualdl/core'));
+
+export default function (action: string, ...args: string[]): Promise<number> {
+    return new Promise((resolve, reject) => {
+        const capitalizedAction = action.replace(/^./, w => w.toUpperCase());
+
+        const spinner = ora(`${capitalizedAction} in process...`).start();
+
+        const log = path.join(process.cwd(), `${action}.log`);
+        writeFileSync(log, '', {flag: 'w'});
+
+        const p = spawn(next, [action, ...args], {
+            cwd: projectRoot,
+            env: {
+                ...process.env,
+                NODE_ENV: 'production'
+            }
+        });
+
+        p.stdout.on('data', data => writeFileSync(log, data, {flag: 'a'}));
+        p.stderr.on('data', data => writeFileSync(log, data, {flag: 'a'}));
+
+        p.on('close', code => {
+            if (code) {
+                spinner.fail(`${capitalizedAction} failed!`);
+                console.error(`Please refer to ${log} for more detail.`);
+                reject(code);
+            } else {
+                spinner.succeed(`${capitalizedAction} complete!`);
+                resolve(code);
+            }
+        });
+    });
+}

frontend/components/HighDimensionalPage/HighDimensionalChart.tsx → frontend/packages/core/components/HighDimensionalPage/HighDimensionalChart.tsx

@@ -14,7 +14,7 @@ const height = rem(600);
 const divideWasm = () =>
     // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
     // @ts-ignore
-    import('~/wasm/dist').then(({divide}) => (params: DivideParams) =>
+    import('@visualdl/wasm').then(({divide}) => (params: DivideParams) =>
         (divide(params.points, params.labels, !!params.visibility, params.keyword ?? '') as unknown) as [
             Point[],
             Point[]

frontend/components/Navbar.tsx → frontend/packages/core/components/Navbar.tsx

@@ -11,10 +11,18 @@ import {
     transitionProps
 } from '~/utils/style';
 
+import intersection from 'lodash/intersection';
 import styled from 'styled-components';
 import {useRouter} from 'next/router';
 
-const navItems = ['scalars', 'samples', 'graphs', 'high-dimensional'];
+const buildNavItems = process.env.NAV_ITEMS;
+const allNavItems = ['scalars', 'samples', 'graphs', 'high-dimensional'];
+const navItems = buildNavItems
+    ? intersection(
+          buildNavItems.split(',').map(item => item.trim()),
+          allNavItems
+      )
+    : allNavItems;
 
 const Nav = styled.nav`
     background-color: ${navbarBackgroundColor};

frontend/components/ScalarsPage/ScalarChart.tsx → frontend/packages/core/components/ScalarsPage/ScalarChart.tsx

@@ -27,15 +27,11 @@ const width = em(430);
 const height = em(320);
 
 const smoothWasm = () =>
-    // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
-    // @ts-ignore
-    import('~/wasm/dist').then(({transform}) => (params: TransformParams) =>
+    import('@visualdl/wasm').then(({transform}) => (params: TransformParams) =>
         (transform(params.datasets, params.smoothing) as unknown) as Dataset[]
     );
 const rangeWasm = () =>
-    // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
-    // @ts-ignore
-    import('~/wasm/dist').then(({range}) => (params: RangeParams) =>
+    import('@visualdl/wasm').then(({range}) => (params: RangeParams) =>
         (range(params.datasets, params.outlier) as unknown) as Range
     );
 

frontend/packages/core/index.js

+module.exports = require('./dist');

frontend/packages/core/next.config.d.ts

+declare type NextEnv = {
+    API_URL: string;
+    DEFAULT_LANGUAGE: string;
+    LANGUAGES: string[];
+    LOCALE_PATH: string;
+};
+
+declare interface NextConfig {
+    env: NextEnv;
+}
+
+const nextConfig: NextConfig;
+
+export default nextConfig;
+
+export const env: NextEnv;

frontend/next.config.js → frontend/packages/core/next.config.js

@@ -31,6 +31,7 @@ module.exports = {
         DEFAULT_LANGUAGE,
         LOCALE_PATH,
         LANGUAGES,
+        NAV_ITEMS: process.env.NAV_ITEMS,
         PUBLIC_PATH: publicPath,
         API_URL: apiUrl
     },
@@ -44,11 +45,9 @@ module.exports = {
     experimental: {
         basePath: publicPath
     },
-    webpack: (config, {dev, webpack}) => {
+    webpack: config => {
         const WorkerPlugin = require('worker-plugin');
 
-        config.output.webassemblyModuleFilename = 'static/wasm/[modulehash].wasm';
-
         config.resolve = config.resolve || {};
         config.resolve.alias = config.resolve.alias || {};
         config.resolve.alias['~'] = path.resolve(__dirname);
@@ -66,19 +65,6 @@ module.exports = {
             })
         ];
 
-        if (!dev || !!process.env.WITH_WASM) {
-            const WasmPackPlugin = require('@wasm-tool/wasm-pack-plugin');
-            config.plugins.push(
-                new WasmPackPlugin({
-                    crateDirectory: path.resolve(__dirname, 'wasm'),
-                    outDir: 'dist',
-                    outName: 'index'
-                })
-            );
-        } else {
-            config.plugins.push(new webpack.IgnorePlugin(/^~\/wasm\//));
-        }
-
         return config;
     }
 };

frontend/packages/core/package.json

+{
+    "name": "@visualdl/core",
+    "version": "2.0.0-beta.32",
+    "title": "VisualDL",
+    "description": "A platform to visualize the deep learning process and result.",
+    "keywords": [
+        "visualdl",
+        "paddlepaddle",
+        "visualization",
+        "deep learning"
+    ],
+    "homepage": "https://github.com/PaddlePaddle/VisualDL",
+    "bugs": {
+        "url": "https://github.com/PaddlePaddle/VisualDL/issues"
+    },
+    "license": "Apache-2.0",
+    "author": "PeterPanZH <littlepanzh@gmail.com> (https://github.com/PeterPanZH)",
+    "contributors": [
+        "Niandalu <littlepanzh@gmail.com> (https://github.com/Niandalu)"
+    ],
+    "repository": {
+        "type": "git",
+        "url": "https://github.com/PaddlePaddle/VisualDL.git",
+        "directory": "frontend/core"
+    },
+    "scripts": {
+        "dev": "next",
+        "build": "next build",
+        "export": "next export",
+        "start": "next start",
+        "test": "echo \"Error: no test specified\" && exit 0"
+    },
+    "dependencies": {
+        "@visualdl/i18n": "^2.0.0-beta.32",
+        "@visualdl/wasm": "^2.0.0-beta.32",
+        "bignumber.js": "9.0.0",
+        "dagre-d3": "0.6.4",
+        "echarts": "4.7.0",
+        "echarts-gl": "1.1.1",
+        "isomorphic-unfetch": "3.0.0",
+        "lodash": "4.17.15",
+        "moment": "2.24.0",
+        "next": "9.3.4",
+        "nprogress": "0.2.0",
+        "polished": "3.5.1",
+        "prop-types": "15.7.2",
+        "query-string": "6.12.0",
+        "react": "16.13.1",
+        "react-dom": "16.13.1",
+        "react-hooks-worker": "0.9.0",
+        "react-input-range": "1.3.0",
+        "react-is": "16.13.1",
+        "react-spinners": "0.8.1",
+        "save-svg-as-png": "1.4.17",
+        "styled-components": "5.1.0",
+        "swr": "0.2.0"
+    },
+    "devDependencies": {
+        "@babel/core": "7.9.0",
+        "@types/d3": "5.7.2",
+        "@types/dagre-d3": "0.4.39",
+        "@types/echarts": "4.4.5",
+        "@types/lodash": "4.14.149",
+        "@types/node": "13.11.0",
+        "@types/nprogress": "0.2.0",
+        "@types/react": "16.9.32",
+        "@types/react-dom": "16.9.6",
+        "@types/styled-components": "5.0.1",
+        "@types/webpack": "4.41.10",
+        "@visualdl/mock": "^2.0.0-beta.32",
+        "babel-plugin-emotion": "10.0.33",
+        "babel-plugin-styled-components": "1.10.7",
+        "babel-plugin-typescript-to-proptypes": "1.3.2",
+        "core-js": "3.6.4",
+        "cross-env": "7.0.2",
+        "css-loader": "3.5.1",
+        "ora": "4.0.3",
+        "typescript": "3.8.3",
+        "worker-plugin": "4.0.2"
+    },
+    "engines": {
+        "node": ">=10",
+        "npm": ">=6"
+    },
+    "publishConfig": {
+        "access": "public"
+    },
+    "husky": {
+        "hooks": {
+            "pre-commit": "lint-staged"
+        }
+    },
+    "gitHead": "d9641c770d9bc4037b2f1cb644fba198bd11a752"
+}

frontend/packages/core/pages/api/[...method].ts

+import mock from '@visualdl/mock';
+
+const delay = Number.parseInt(process.env.DELAY || '', 10);
+
+export default mock({delay: delay ? () => Math.random() * delay : 0});

frontend/pages/samples.tsx → frontend/packages/core/pages/samples.tsx

@@ -8,7 +8,7 @@ import AsideDivider from '~/components/AsideDivider';
 import ChartPage from '~/components/ChartPage';
 import Checkbox from '~/components/Checkbox';
 import Content from '~/components/Content';
-import Field from '~/components/Field';
+// import Field from '~/components/Field';
 // import Icon from '~/components/Icon';
 import Preloader from '~/components/Preloader';
 import RunSelect from '~/components/RunSelect';
@@ -16,8 +16,8 @@ import RunningToggle from '~/components/RunningToggle';
 import SampleChart from '~/components/SamplesPage/SampleChart';
 import TagFilter from '~/components/TagFilter';
 import Title from '~/components/Title';
-import {rem} from '~/utils/style';
-import styled from 'styled-components';
+// import {rem} from '~/utils/style';
+// import styled from 'styled-components';
 import useTagFilter from '~/hooks/useTagFilter';
 
 // const StyledIcon = styled(Icon)`
@@ -33,10 +33,6 @@ import useTagFilter from '~/hooks/useTagFilter';
 //     vertical-align: text-top;
 // `;
 
-const SubField = styled(Field)`
-    margin-left: ${rem(26)};
-`;
-
 type Item = {
     run: string;
     label: string;
@@ -81,11 +77,9 @@ const Samples: NextI18NextPage = () => {
                 </Checkbox>
             </Field> */}
             {showImage && (
-                <SubField>
-                    <Checkbox value={showActualSize} onChange={setShowActualSize}>
-                        {t('show-actual-size')}
-                    </Checkbox>
-                </SubField>
+                <Checkbox value={showActualSize} onChange={setShowActualSize}>
+                    {t('show-actual-size')}
+                </Checkbox>
             )}
             {/* <AsideDivider />
             <Field>