diff --git a/frontend/lerna.json b/frontend/lerna.json index be0fffc8b26ff687fe062d11c146cd24b7ab48bd..2d7884cb8979a095efae734983fec099d6d815db 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 6450a1d059fae5d09cd94229462515e3152b2b6d..fc569ddb1c6430b123b9a0addf8cd107f7dc82a8 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 88eed795395608b3f744af7546f9a599078cd7dc..c48e5c6ec66b0318368c508efdeed3df1dd5e78f 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 = ({ run, + tag, running, labelVisibility, keyword, @@ -66,8 +68,9 @@ const HighDimensionalChart: FunctionComponent = ({ const {data, error, loading} = useRunningRequest( `/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 187b5615e79b2d9d76c383c8b2e6fdc19a15613f..0ca3a74bed27a2d1433402cd5e7cf2ab0000cbf2 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 a778c9c5c31567ba8f63fbc476a5be3add9df9d1..2004554e6b5a4afd655375e2740a9b452076e554 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('/runs', running); + + const {data: tags, error: tagsError, loading: tagsLoading} = useRunningRequest>( + '/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( + (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('/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 = ( {t('common:select-runs')} - [number]) => setRun(value)} - /> + @@ -123,7 +152,8 @@ const HighDimensional: NextI18NextPage = () => {