From b3f4bdb7ca8773638ee31797dd19b2ee724f5502 Mon Sep 17 00:00:00 2001
From: Peter Pan <littlepanzh@gmail.com>
Date: Mon, 18 May 2020 11:30:06 +0800
Subject: [PATCH] add tag select in high-dimensional page (#629)

* feat: add tag select in high-dimensional page

* v2.0.0-beta.43
---
 frontend/lerna.json                           |  2 +-
 frontend/packages/cli/package.json            |  4 +-
 .../HighDimensionalChart.tsx                  |  7 ++-
 frontend/packages/core/package.json           |  8 +--
 .../packages/core/pages/high-dimensional.tsx  | 54 ++++++++++++++-----
 frontend/packages/i18n/package.json           |  2 +-
 .../packages/mock/data/embeddings/tags.ts     | 10 ++++
 frontend/packages/mock/package.json           |  2 +-
 frontend/packages/server/package.json         |  8 +--
 frontend/packages/serverless/package.json     |  4 +-
 frontend/packages/wasm/package.json           |  2 +-
 11 files changed, 73 insertions(+), 30 deletions(-)
 create mode 100644 frontend/packages/mock/data/embeddings/tags.ts

diff --git a/frontend/lerna.json b/frontend/lerna.json
index be0fffc8..2d7884cb 100644
--- a/frontend/lerna.json
+++ b/frontend/lerna.json
@@ -2,7 +2,7 @@
     "packages": [
         "packages/*"
     ],
-    "version": "2.0.0-beta.42",
+    "version": "2.0.0-beta.43",
     "npmClient": "yarn",
     "useWorkspaces": true,
     "command": {
diff --git a/frontend/packages/cli/package.json b/frontend/packages/cli/package.json
index 6450a1d0..fc569ddb 100644
--- a/frontend/packages/cli/package.json
+++ b/frontend/packages/cli/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@visualdl/cli",
-    "version": "2.0.0-beta.42",
+    "version": "2.0.0-beta.43",
     "description": "A platform to visualize the deep learning process and result.",
     "keywords": [
         "visualdl",
@@ -34,7 +34,7 @@
         "dist"
     ],
     "dependencies": {
-        "@visualdl/server": "2.0.0-beta.42",
+        "@visualdl/server": "2.0.0-beta.43",
         "open": "7.0.3",
         "ora": "4.0.4",
         "pm2": "4.4.0",
diff --git a/frontend/packages/core/components/HighDimensionalPage/HighDimensionalChart.tsx b/frontend/packages/core/components/HighDimensionalPage/HighDimensionalChart.tsx
index 88eed795..c48e5c6e 100644
--- a/frontend/packages/core/components/HighDimensionalPage/HighDimensionalChart.tsx
+++ b/frontend/packages/core/components/HighDimensionalPage/HighDimensionalChart.tsx
@@ -47,6 +47,7 @@ type Data = {
 
 type HighDimensionalChartProps = {
     run: string;
+    tag: string;
     running?: boolean;
     labelVisibility?: boolean;
     reduction: Reduction;
@@ -56,6 +57,7 @@ type HighDimensionalChartProps = {
 
 const HighDimensionalChart: FunctionComponent<HighDimensionalChartProps> = ({
     run,
+    tag,
     running,
     labelVisibility,
     keyword,
@@ -66,8 +68,9 @@ const HighDimensionalChart: FunctionComponent<HighDimensionalChartProps> = ({
 
     const {data, error, loading} = useRunningRequest<Data>(
         `/embeddings/embedding?${queryString.stringify({
-            run: run ?? '',
-            dimension: Number.parseInt(dimension),
+            run,
+            tag,
+            dimension: Number.parseInt(dimension, 10),
             reduction
         })}`,
         !!running
diff --git a/frontend/packages/core/package.json b/frontend/packages/core/package.json
index 187b5615..0ca3a74b 100644
--- a/frontend/packages/core/package.json
+++ b/frontend/packages/core/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@visualdl/core",
-    "version": "2.0.0-beta.42",
+    "version": "2.0.0-beta.43",
     "title": "VisualDL",
     "description": "A platform to visualize the deep learning process and result.",
     "keywords": [
@@ -31,8 +31,8 @@
         "test": "echo \"Error: no test specified\" && exit 0"
     },
     "dependencies": {
-        "@visualdl/i18n": "2.0.0-beta.42",
-        "@visualdl/wasm": "2.0.0-beta.42",
+        "@visualdl/i18n": "2.0.0-beta.43",
+        "@visualdl/wasm": "2.0.0-beta.43",
         "bignumber.js": "9.0.0",
         "dagre-d3": "0.6.4",
         "echarts": "4.7.0",
@@ -73,7 +73,7 @@
         "@types/react": "16.9.34",
         "@types/react-dom": "16.9.7",
         "@types/styled-components": "5.1.0",
-        "@visualdl/mock": "2.0.0-beta.42",
+        "@visualdl/mock": "2.0.0-beta.43",
         "babel-plugin-emotion": "10.0.33",
         "babel-plugin-styled-components": "1.10.7",
         "babel-plugin-typescript-to-proptypes": "1.3.2",
diff --git a/frontend/packages/core/pages/high-dimensional.tsx b/frontend/packages/core/pages/high-dimensional.tsx
index a778c9c5..2004554e 100644
--- a/frontend/packages/core/pages/high-dimensional.tsx
+++ b/frontend/packages/core/pages/high-dimensional.tsx
@@ -1,6 +1,6 @@
 import {Dimension, Reduction} from '~/resource/high-dimensional';
 import {NextI18NextPage, useTranslation} from '~/utils/i18n';
-import React, {useEffect, useState} from 'react';
+import React, {useEffect, useMemo, useState} from 'react';
 import Select, {SelectProps} from '~/components/Select';
 import {em, rem} from '~/utils/style';
 
@@ -44,18 +44,51 @@ const AsideTitle = styled.div`
     margin-bottom: ${rem(10)};
 `;
 
+type Item = {
+    run: string;
+    tag: string;
+    label: string;
+};
+
 const HighDimensional: NextI18NextPage = () => {
     const {t} = useTranslation(['high-dimensional', 'common']);
 
     const [running, setRunning] = useState(true);
 
+    const {data: runs, error: runsError, loading: runsLoading} = useRunningRequest<string[]>('/runs', running);
+
+    const {data: tags, error: tagsError, loading: tagsLoading} = useRunningRequest<Record<string, string[]>>(
+        '/embeddings/tags',
+        running
+    );
+
+    const error = useMemo(() => runsError || tagsError, [runsError, tagsError]);
+    const loading = useMemo(() => runsLoading || tagsLoading, [runsLoading, tagsLoading]);
+
+    const list = useMemo(() => {
+        if (!runs || !tags) {
+            return [];
+        }
+        return runs.reduce<Item[]>(
+            (p, run) => [...p, ...(tags[run].map(tag => ({run, tag, label: `${run}/${tag}`})) ?? [])],
+            []
+        );
+    }, [runs, tags]);
+    const labelList = useMemo(() => list.map(item => item.label), [list]);
+
     const {query} = useRouter();
-    const queryRun = Array.isArray(query.run) ? query.run[0] : query.run;
-    const {data: runs, error, loading} = useRunningRequest<string[]>('/runs', running);
-    const selectedRun = queryRun && runs?.includes(queryRun) ? queryRun : runs?.[0];
+    const selectedLabel = useMemo(() => {
+        const run = Array.isArray(query.run) ? query.run[0] : query.run;
+        return (run && list.find(item => item.run === run)?.label) ?? list[0]?.label;
+    }, [query.run, list]);
+
+    const [label, setLabel] = useState(selectedLabel);
+    useEffect(() => setLabel(selectedLabel), [selectedLabel]);
 
-    const [run, setRun] = useState(selectedRun);
-    useEffect(() => setRun(selectedRun), [setRun, selectedRun]);
+    const selectedItem = useMemo(() => list.find(item => item.label === label) ?? {run: '', tag: '', label: ''}, [
+        list,
+        label
+    ]);
 
     const [search, setSearch] = useState('');
     const debounceSearch = useSearchValue(search);
@@ -66,11 +99,7 @@ const HighDimensional: NextI18NextPage = () => {
     const aside = (
         <AsideSection>
             <AsideTitle>{t('common:select-runs')}</AsideTitle>
-            <StyledSelect
-                list={runs}
-                value={run}
-                onChange={(value: NonNullable<typeof runs>[number]) => setRun(value)}
-            />
+            <StyledSelect list={labelList} value={label} onChange={setLabel} />
             <AsideDivider />
             <Field>
                 <SearchInput placeholder={t('common:search')} value={search} onChange={setSearch} />
@@ -123,7 +152,8 @@ const HighDimensional: NextI18NextPage = () => {
                     <HighDimensionalChart
                         dimension={dimension}
                         keyword={debounceSearch}
-                        run={run ?? ''}
+                        run={selectedItem.run}
+                        tag={selectedItem.tag}
                         running={running}
                         labelVisibility={labelVisibility}
                         reduction={reduction}
diff --git a/frontend/packages/i18n/package.json b/frontend/packages/i18n/package.json
index 6ad6de03..d72385ec 100644
--- a/frontend/packages/i18n/package.json
+++ b/frontend/packages/i18n/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@visualdl/i18n",
-    "version": "2.0.0-beta.42",
+    "version": "2.0.0-beta.43",
     "description": "A platform to visualize the deep learning process and result.",
     "keywords": [
         "visualdl",
diff --git a/frontend/packages/mock/data/embeddings/tags.ts b/frontend/packages/mock/data/embeddings/tags.ts
new file mode 100644
index 00000000..3e67b010
--- /dev/null
+++ b/frontend/packages/mock/data/embeddings/tags.ts
@@ -0,0 +1,10 @@
+export default {
+    test: ['layer2/biases/summaries/mean', 'test/1234', 'another'],
+    train: [
+        'layer2/biases/summaries/mean',
+        'layer2/biases/summaries/accuracy',
+        'layer2/biases/summaries/cost',
+        'test/431',
+        'others'
+    ]
+};
diff --git a/frontend/packages/mock/package.json b/frontend/packages/mock/package.json
index 7b0be8b0..2b8d83aa 100644
--- a/frontend/packages/mock/package.json
+++ b/frontend/packages/mock/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@visualdl/mock",
-    "version": "2.0.0-beta.42",
+    "version": "2.0.0-beta.43",
     "description": "A platform to visualize the deep learning process and result.",
     "keywords": [
         "visualdl",
diff --git a/frontend/packages/server/package.json b/frontend/packages/server/package.json
index 75add315..ae732be7 100644
--- a/frontend/packages/server/package.json
+++ b/frontend/packages/server/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@visualdl/server",
-    "version": "2.0.0-beta.42",
+    "version": "2.0.0-beta.43",
     "description": "A platform to visualize the deep learning process and result.",
     "keywords": [
         "visualdl",
@@ -36,8 +36,8 @@
         "ecosystem.config.d.ts"
     ],
     "dependencies": {
-        "@visualdl/core": "2.0.0-beta.42",
-        "@visualdl/i18n": "2.0.0-beta.42",
+        "@visualdl/core": "2.0.0-beta.43",
+        "@visualdl/i18n": "2.0.0-beta.43",
         "express": "4.17.1",
         "http-proxy-middleware": "1.0.3",
         "next": "9.3.6",
@@ -49,7 +49,7 @@
         "@types/shelljs": "0.8.7",
         "@types/webpack": "4.41.12",
         "@types/webpack-dev-middleware": "3.7.0",
-        "@visualdl/mock": "2.0.0-beta.42",
+        "@visualdl/mock": "2.0.0-beta.43",
         "cross-env": "7.0.2",
         "nodemon": "2.0.3",
         "shelljs": "0.8.4",
diff --git a/frontend/packages/serverless/package.json b/frontend/packages/serverless/package.json
index d996f7f8..37c35302 100644
--- a/frontend/packages/serverless/package.json
+++ b/frontend/packages/serverless/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@visualdl/serverless",
-    "version": "2.0.0-beta.42",
+    "version": "2.0.0-beta.43",
     "description": "A platform to visualize the deep learning process and result.",
     "keywords": [
         "visualdl",
@@ -33,7 +33,7 @@
     "devDependencies": {
         "@types/node": "13.13.5",
         "@types/rimraf": "3.0.0",
-        "@visualdl/core": "2.0.0-beta.42",
+        "@visualdl/core": "2.0.0-beta.43",
         "cross-env": "7.0.2",
         "rimraf": "3.0.2",
         "ts-node": "8.10.1",
diff --git a/frontend/packages/wasm/package.json b/frontend/packages/wasm/package.json
index fc5c9e8f..de668236 100644
--- a/frontend/packages/wasm/package.json
+++ b/frontend/packages/wasm/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@visualdl/wasm",
-    "version": "2.0.0-beta.42",
+    "version": "2.0.0-beta.43",
     "title": "VisualDL",
     "description": "A platform to visualize the deep learning process and result.",
     "keywords": [
-- 
GitLab