Rewrite High-Dimensional

frontend/package.json

@@ -38,21 +38,21 @@
         "version": "yarn format && git add -A"
     },
     "devDependencies": {
-        "@typescript-eslint/eslint-plugin": "4.1.1",
-        "@typescript-eslint/parser": "4.1.1",
-        "eslint": "7.9.0",
-        "eslint-config-prettier": "6.11.0",
+        "@typescript-eslint/eslint-plugin": "4.10.0",
+        "@typescript-eslint/parser": "4.10.0",
+        "eslint": "7.15.0",
+        "eslint-config-prettier": "7.0.0",
         "eslint-plugin-license-header": "0.2.0",
-        "eslint-plugin-prettier": "3.1.4",
-        "eslint-plugin-react": "7.20.6",
-        "eslint-plugin-react-hooks": "4.1.2",
-        "husky": "4.3.0",
+        "eslint-plugin-prettier": "3.3.0",
+        "eslint-plugin-react": "7.21.5",
+        "eslint-plugin-react-hooks": "4.2.0",
+        "husky": "4.3.6",
         "lerna": "3.22.1",
-        "lint-staged": "10.4.0",
-        "prettier": "2.1.2",
+        "lint-staged": "10.5.3",
+        "prettier": "2.2.1",
         "rimraf": "3.0.2",
-        "typescript": "4.0.2",
-        "yarn": "1.22.5"
+        "typescript": "4.0.5",
+        "yarn": "1.22.10"
     },
     "engines": {
         "node": ">=10",

frontend/packages/cli/package.json

@@ -35,17 +35,17 @@
     ],
     "dependencies": {
         "@visualdl/server": "2.0.9",
-        "open": "7.2.1",
+        "open": "7.3.0",
         "ora": "5.1.0",
-        "pm2": "4.4.1",
-        "yargs": "16.0.3"
+        "pm2": "4.5.0",
+        "yargs": "16.2.0"
     },
     "devDependencies": {
-        "@types/node": "14.10.3",
-        "@types/yargs": "15.0.5",
-        "cross-env": "7.0.2",
-        "ts-node": "9.0.0",
-        "typescript": "4.0.2"
+        "@types/node": "14.14.14",
+        "@types/yargs": "15.0.12",
+        "cross-env": "7.0.3",
+        "ts-node": "9.1.1",
+        "typescript": "4.0.5"
     },
     "engines": {
         "node": ">=12",

frontend/packages/core/builder/inject-env.js

@@ -19,7 +19,7 @@
 const path = require('path');
 const fs = require('fs/promises');
 
-const ENV_INJECT = 'const env = window.__snowpack_env__ || {}; export default env;';
+const ENV_INJECT = 'const env = globalThis.__snowpack_env__ || {}; export default env;';
 
 const dest = path.resolve(__dirname, '../dist/__snowpack__');
 const envFile = path.join(dest, 'env.js');

frontend/packages/core/builder/netron.js

@@ -20,7 +20,7 @@
 const path = require('path');
 const fs = require('fs-extra');
 
-const root = path.dirname(require('enhanced-resolve').sync(__dirname, '@visualdl/netron'));
+const root = path.dirname(require('enhanced-resolve').sync(__dirname, '@visualdl/netron') || '');
 const pathname = '/netron';
 const dist = path.resolve(__dirname, '../dist');
 const dest = path.join(dist, pathname);

frontend/packages/core/package.json

@@ -34,82 +34,86 @@
         "builder/environment.js"
     ],
     "dependencies": {
-        "@tippyjs/react": "4.1.0",
+        "@tippyjs/react": "4.2.0",
         "@visualdl/netron": "2.0.9",
         "@visualdl/wasm": "2.0.9",
-        "bignumber.js": "9.0.0",
+        "bignumber.js": "9.0.1",
+        "d3": "6.3.1",
         "d3-format": "2.0.0",
         "echarts": "4.9.0",
         "echarts-gl": "1.1.1",
         "eventemitter3": "4.0.7",
-        "file-saver": "2.0.2",
-        "i18next": "19.7.0",
+        "file-saver": "2.0.5",
+        "i18next": "19.8.4",
         "i18next-browser-languagedetector": "6.0.1",
         "i18next-fetch-backend": "3.0.0",
         "lodash": "4.17.20",
         "mime-types": "2.1.27",
-        "moment": "2.28.0",
+        "moment": "2.29.1",
         "nprogress": "0.2.0",
-        "polished": "3.6.6",
-        "query-string": "6.13.2",
-        "react": "16.13.1",
-        "react-dom": "16.13.1",
+        "polished": "4.0.5",
+        "query-string": "6.13.7",
+        "react": "17.0.1",
+        "react-dom": "17.0.1",
         "react-helmet": "6.1.0",
-        "react-i18next": "11.7.2",
+        "react-i18next": "11.8.4",
         "react-input-range": "1.3.0",
-        "react-is": "16.13.1",
+        "react-is": "17.0.1",
         "react-rangeslider": "2.2.0",
-        "react-redux": "7.2.1",
+        "react-redux": "7.2.2",
         "react-router-dom": "5.2.0",
         "react-spinners": "0.9.0",
-        "react-toastify": "6.0.8",
+        "react-toastify": "6.2.0",
         "redux": "4.0.5",
-        "styled-components": "5.2.0",
-        "swr": "0.3.0",
-        "tippy.js": "6.2.6"
+        "styled-components": "5.2.1",
+        "swr": "0.3.9",
+        "three": "0.123.0",
+        "tippy.js": "6.2.7",
+        "umap-js": "1.3.3"
     },
     "devDependencies": {
-        "@babel/core": "7.11.6",
-        "@babel/plugin-proposal-class-properties": "7.10.4",
-        "@babel/preset-env": "7.11.5",
-        "@babel/preset-react": "7.10.4",
-        "@baiducloud/sdk": "1.0.0-rc.22",
+        "@babel/core": "7.12.10",
+        "@babel/plugin-proposal-class-properties": "7.12.1",
+        "@babel/preset-env": "7.12.11",
+        "@babel/preset-react": "7.12.10",
+        "@baiducloud/sdk": "1.0.0-rc.25",
         "@simbathesailor/use-what-changed": "0.1.25",
-        "@snowpack/app-scripts-react": "1.10.0",
-        "@snowpack/plugin-dotenv": "2.0.1",
-        "@snowpack/plugin-optimize": "0.2.1",
-        "@snowpack/plugin-run-script": "2.1.2",
-        "@svgr/core": "5.4.0",
-        "@testing-library/jest-dom": "5.11.4",
-        "@testing-library/react": "11.0.4",
-        "@types/d3-format": "1.3.1",
-        "@types/echarts": "4.6.5",
+        "@snowpack/app-scripts-react": "1.12.6",
+        "@snowpack/plugin-dotenv": "2.0.5",
+        "@snowpack/plugin-optimize": "0.2.10",
+        "@snowpack/plugin-run-script": "2.2.1",
+        "@svgr/core": "5.5.0",
+        "@testing-library/jest-dom": "5.11.6",
+        "@testing-library/react": "11.2.2",
+        "@types/d3": "6.2.0",
+        "@types/d3-format": "2.0.0",
+        "@types/echarts": "4.9.3",
         "@types/file-saver": "2.0.1",
-        "@types/jest": "26.0.14",
-        "@types/loadable__component": "5.13.0",
-        "@types/lodash": "4.14.161",
+        "@types/jest": "26.0.19",
+        "@types/loadable__component": "5.13.1",
+        "@types/lodash": "4.14.165",
         "@types/mime-types": "2.1.0",
         "@types/nprogress": "0.2.0",
-        "@types/react": "16.9.49",
-        "@types/react-dom": "16.9.8",
+        "@types/react": "17.0.0",
+        "@types/react-dom": "17.0.0",
         "@types/react-helmet": "6.1.0",
         "@types/react-rangeslider": "2.2.3",
-        "@types/react-redux": "7.1.9",
-        "@types/react-router-dom": "5.1.5",
-        "@types/snowpack-env": "2.3.0",
-        "@types/styled-components": "5.1.3",
+        "@types/react-redux": "7.1.12",
+        "@types/react-router-dom": "5.1.6",
+        "@types/snowpack-env": "2.3.2",
+        "@types/styled-components": "5.1.5",
         "@visualdl/mock": "2.0.9",
-        "babel-plugin-styled-components": "1.11.1",
+        "babel-plugin-styled-components": "1.12.0",
         "dotenv": "8.2.0",
-        "enhanced-resolve": "4.3.0",
+        "enhanced-resolve": "5.4.0",
         "express": "4.17.1",
         "fs-extra": "9.0.1",
         "html-minifier": "4.0.0",
-        "http-proxy-middleware": "1.0.5",
-        "jest": "26.4.2",
-        "snowpack": "2.11.1",
-        "typescript": "4.0.2",
-        "yargs": "16.0.3"
+        "http-proxy-middleware": "1.0.6",
+        "jest": "26.6.3",
+        "snowpack": "2.18.4",
+        "typescript": "4.0.5",
+        "yargs": "16.2.0"
     },
     "engines": {
         "node": ">=14",

frontend/packages/core/public/locales/en/high-dimensional.json

@@ -1,9 +1,50 @@
 {
-    "2d": "2D",
-    "3d": "3D",
+    "3d-label": "Enable/disable 3D labels mode",
+    "component": "Component #{{index}}",
+    "continue": "Resume",
+    "data": "Data",
+    "data-dimension": "Types",
+    "data-path": "Data Path",
     "dimension": "Dimension",
-    "display-all-label": "Display All Labels",
-    "pca": "PCA",
-    "reduction-method": "Reduction Method",
-    "tsne": "T-SNE"
+    "dimension-value": {
+        "2d": "2D",
+        "3d": "3D"
+    },
+    "iteration": "Iteration",
+    "learning-rate": "Learning rate",
+    "loading": {
+        "calculating": "Calculating...",
+        "fetching-metadata": "Fetching metadata...",
+        "fetching-tensor": "Fetching tensor...",
+        "parsing": "Parsing data...",
+        "reading-metadata": "Reading metadata...",
+        "reading-vector": "Reading tensor..."
+    },
+    "matched-result-count": "{{count}} matched.",
+    "neighbors": "Neighbors",
+    "pause": "Pause",
+    "perplexity": "Perplexity",
+    "points": "Points",
+    "reduction-value": {
+        "pca": "PCA",
+        "tsne": "T-SNE",
+        "umap": "UMAP"
+    },
+    "reset-zoom": "Reset zoom to fit all points",
+    "run": "Run",
+    "search-empty": "Nothing matched",
+    "select-color": "Color by",
+    "select-data": "Select Data",
+    "select-file": "Select File",
+    "select-label": "Label by",
+    "selection": "Bounding box selection",
+    "stop": "Stop",
+    "total-variance-described": "Total variance described",
+    "tsne": "T-SNE",
+    "upload": {
+        "step1": "Step 1: Load a TSV file of vectors.<1/> Example of 3 vectors with dimension 4:",
+        "step2": "Step 2 (optional): Load a TSV file of metadata.<1/>Example of 3 data points and 2 columns.<3/><4>Note: If there is more than one column, the first row will be parsed as column labels.</4>"
+    },
+    "upload-data": "Upload Data",
+    "upload-from-computer": "Load data from your computer"
 }

frontend/packages/core/public/locales/zh/high-dimensional.json

@@ -1,9 +1,50 @@
 {
-    "2d": "二维",
-    "3d": "三维",
+    "3d-label": "开启/关闭3D数据标签",
+    "component": "主成分{{index}}",
+    "continue": "继续",
+    "data": "数据",
+    "data-dimension": "数据类别",
+    "data-path": "数据路径",
     "dimension": "维度",
-    "display-all-label": "展示所有标签",
-    "pca": "PCA",
-    "reduction-method": "降维方法",
-    "tsne": "T-SNE"
+    "dimension-value": {
+        "2d": "2D",
+        "3d": "3D"
+    },
+    "iteration": "迭代",
+    "learning-rate": "学习率",
+    "loading": {
+        "calculating": "计算中……",
+        "fetching-metadata": "获取元数据中……",
+        "fetching-tensor": "获取数据中……",
+        "parsing": "解析数据中……",
+        "reading-metadata": "读取元数据中……",
+        "reading-vector": "读取数据中……"
+    },
+    "matched-result-count": "匹配结果 {{count}}",
+    "neighbors": "相邻数据点数量",
+    "pause": "暂停",
+    "perplexity": "困惑度",
+    "points": "数据点",
+    "reduction-value": {
+        "pca": "PCA",
+        "tsne": "T-SNE",
+        "umap": "UMAP"
+    },
+    "reset-zoom": "重置大小设置",
+    "run": "运行",
+    "search-empty": "无搜索结果",
+    "select-color": "颜色分类方式",
+    "select-data": "选择可视化数据",
+    "select-file": "选择文件",
+    "select-label": "数据标签",
+    "selection": "框选数据",
+    "stop": "停止",
+    "total-variance-described": "主成分解释原变量总方差",
+    "tsne": "T-SNE",
+    "upload": {
+        "step1": "步骤一：上传向量的TSV文件<1/>以下是三个带有四个维度的向量的例子",
+        "step2": "步骤二（可选）：上传Metadata的TSV文件<1/>以下是四列三个数据点的例子：<3/><4>注意：如果数据列数大于一，那么第一行数据会默认为列名</4>"
+    },
+    "upload-data": "上传数据",
+    "upload-from-computer": "从本地电脑上传数据"
 }

frontend/packages/core/snowpack.config.js

@@ -62,11 +62,11 @@ module.exports = {
         }, {})
     },
     devOptions: {
-        out: 'dist',
         hostname: process.env.HOST || 'localhost',
         port
     },
     buildOptions: {
+        out: 'dist',
         baseUrl: '/', // set it in post-build
         clean: true
     },