From 579873fe09c5392c0c336d7c3217f9a3c0482c45 Mon Sep 17 00:00:00 2001 From: Peter Pan Date: Tue, 29 Dec 2020 10:49:38 +0800 Subject: [PATCH] multiple formats support when downloading raw data (#894) * feat: download raw data in multiple formats * feat: bump fe to 2.1.1 * style: fix bugs of lint fe --- .pre-commit-config.yaml | 3 +- frontend/lerna.json | 2 +- frontend/packages/cli/package.json | 4 +- frontend/packages/core/package.json | 8 ++-- .../core/public/icons/chevron-left.svg | 3 ++ .../core/public/icons/chevron-right.svg | 3 ++ .../core/public/locales/en/scalar.json | 1 + .../core/public/locales/zh/scalar.json | 1 + .../core/src/components/ChartToolbox.tsx | 47 ++++++++++++++++--- .../src/components/ScalarPage/ScalarChart.tsx | 38 ++++++++++++--- frontend/packages/demo/package.json | 2 +- frontend/packages/mock/data/scalar/data.ts | 13 +++-- frontend/packages/mock/package.json | 2 +- frontend/packages/netron/package.json | 2 +- frontend/packages/server/package.json | 8 ++-- frontend/packages/wasm/package.json | 2 +- frontend/scripts/lint-staged.sh | 11 +++++ 17 files changed, 117 insertions(+), 33 deletions(-) create mode 100644 frontend/packages/core/public/icons/chevron-left.svg create mode 100644 frontend/packages/core/public/icons/chevron-right.svg create mode 100755 frontend/scripts/lint-staged.sh diff --git a/.pre-commit-config.yaml b/.pre-commit-config.yaml index dda56103..b5ea44af 100644 --- a/.pre-commit-config.yaml +++ b/.pre-commit-config.yaml @@ -21,10 +21,9 @@ repos: hooks: - id: fe name: lint-staged - entry: cd frontend && lint-staged + entry: ./frontend/scripts/lint-staged.sh language: node files: ^frontend/ - pass_filenames: false description: lint frontend code by lint-staged - repo: meta hooks: diff --git a/frontend/lerna.json b/frontend/lerna.json index ff15a09a..16b71fcb 100644 --- a/frontend/lerna.json +++ b/frontend/lerna.json @@ -2,7 +2,7 @@ "packages": [ "packages/*" ], - "version": "2.1.0-1", + "version": "2.1.1", "npmClient": "yarn", "useWorkspaces": true, "command": { diff --git a/frontend/packages/cli/package.json b/frontend/packages/cli/package.json index cb62d9b8..ac4c57ff 100644 --- a/frontend/packages/cli/package.json +++ b/frontend/packages/cli/package.json @@ -1,6 +1,6 @@ { "name": "@visualdl/cli", - "version": "2.1.0-1", + "version": "2.1.1", "description": "A platform to visualize the deep learning process and result.", "keywords": [ "visualdl", @@ -34,7 +34,7 @@ "dist" ], "dependencies": { - "@visualdl/server": "2.1.0-1", + "@visualdl/server": "2.1.1", "open": "7.3.0", "ora": "5.1.0", "pm2": "4.5.1", diff --git a/frontend/packages/core/package.json b/frontend/packages/core/package.json index 68e3e882..903ceb29 100644 --- a/frontend/packages/core/package.json +++ b/frontend/packages/core/package.json @@ -1,6 +1,6 @@ { "name": "@visualdl/core", - "version": "2.1.0-1", + "version": "2.1.1", "description": "A platform to visualize the deep learning process and result.", "keywords": [ "visualdl", @@ -35,8 +35,8 @@ ], "dependencies": { "@tippyjs/react": "4.2.0", - "@visualdl/netron": "2.1.0-1", - "@visualdl/wasm": "2.1.0-1", + "@visualdl/netron": "2.1.1", + "@visualdl/wasm": "2.1.1", "bignumber.js": "9.0.1", "d3": "6.3.1", "d3-format": "2.0.0", @@ -105,7 +105,7 @@ "@types/react-router-dom": "5.1.6", "@types/snowpack-env": "2.3.3", "@types/styled-components": "5.1.7", - "@visualdl/mock": "2.1.0-1", + "@visualdl/mock": "2.1.1", "babel-plugin-styled-components": "1.12.0", "dotenv": "8.2.0", "enhanced-resolve": "5.4.1", diff --git a/frontend/packages/core/public/icons/chevron-left.svg b/frontend/packages/core/public/icons/chevron-left.svg new file mode 100644 index 00000000..eb699020 --- /dev/null +++ b/frontend/packages/core/public/icons/chevron-left.svg @@ -0,0 +1,3 @@ + + + diff --git a/frontend/packages/core/public/icons/chevron-right.svg b/frontend/packages/core/public/icons/chevron-right.svg new file mode 100644 index 00000000..387397f4 --- /dev/null +++ b/frontend/packages/core/public/icons/chevron-right.svg @@ -0,0 +1,3 @@ + + + diff --git a/frontend/packages/core/public/locales/en/scalar.json b/frontend/packages/core/public/locales/en/scalar.json index dd403683..7f805017 100644 --- a/frontend/packages/core/public/locales/en/scalar.json +++ b/frontend/packages/core/public/locales/en/scalar.json @@ -1,5 +1,6 @@ { "download-data": "Download data", + "download-data-format": "In {{format}}", "download-image": "Download image", "ignore-outliers": "Ignore outliers in chart scaling", "max": "Max.", diff --git a/frontend/packages/core/public/locales/zh/scalar.json b/frontend/packages/core/public/locales/zh/scalar.json index 5ce8ca80..5416340e 100644 --- a/frontend/packages/core/public/locales/zh/scalar.json +++ b/frontend/packages/core/public/locales/zh/scalar.json @@ -1,5 +1,6 @@ { "download-data": "下载数据", + "download-data-format": "{{format}} 格式", "download-image": "下载图片", "ignore-outliers": "图表缩放时忽略极端值", "max": "最大值", diff --git a/frontend/packages/core/src/components/ChartToolbox.tsx b/frontend/packages/core/src/components/ChartToolbox.tsx index 064be38b..b9e07539 100644 --- a/frontend/packages/core/src/components/ChartToolbox.tsx +++ b/frontend/packages/core/src/components/ChartToolbox.tsx @@ -48,7 +48,7 @@ const ToolboxItem = styled.a<{active?: boolean}>` } `; -const ChartToolboxMenu = styled.div` +const ChartToolboxMenuWrapper = styled.div` background-color: var(--background-color); ${transitionProps('background-color')}; @@ -65,9 +65,16 @@ const ChartToolboxMenu = styled.div` } `; +const ChartToolboxMenuIcon = styled(Icon)` + vertical-align: middle; + font-size: 78%; + margin-left: 0.6em; +`; + interface ChartToolboxItemChild { label: string; onClick?: () => unknown; + children?: ChartToolboxItemChild[]; } type BaseChartToolboxItem = { @@ -169,17 +176,45 @@ const ToggleChartToolbox: FunctionComponent = ({ ); }; +const ChartToolboxMenu: FunctionComponent = ({label, onClick, children}) => { + return children ? ( + + {children.map((item, index) => ( + + ))} + + } + placement="right-start" + animation="shift-away-subtle" + interactive + hideOnClick={false} + arrow={false} + role="menu" + theme="menu" + offset={[0, 0]} + > + + {label} + + + ) : ( + + onClick?.()}>{label} + + ); +}; + const MenuChartToolbox: FunctionComponent = ({icon, menuList}) => { return ( + {menuList.map((item, index) => ( - item.onClick?.()}> - {item.label} - + ))} - + } placement="right-start" animation="shift-away-subtle" diff --git a/frontend/packages/core/src/components/ScalarPage/ScalarChart.tsx b/frontend/packages/core/src/components/ScalarPage/ScalarChart.tsx index b1bf41d2..a6ca90b5 100644 --- a/frontend/packages/core/src/components/ScalarPage/ScalarChart.tsx +++ b/frontend/packages/core/src/components/ScalarPage/ScalarChart.tsx @@ -45,6 +45,12 @@ import {useRunningRequest} from '~/hooks/useRequest'; import {useTranslation} from 'react-i18next'; import useWebAssembly from '~/hooks/useWebAssembly'; +const DownloadDataTypes = { + csv: 'csv', + tsv: 'tsv' + // excel: 'xlsx' +} as const; + const labelFormatter = format('.8'); const Wrapper = styled.div` @@ -211,6 +217,24 @@ const ScalarChart: FunctionComponent = ({ [formatter, ranges, xAxisType, yAxisType] ); + const downloadData = useCallback( + (type: keyof typeof DownloadDataTypes) => { + saveFile( + runs.map( + run => + `/scalar/data?${queryString.stringify({ + run: run.label, + tag, + type + })}` + ), + runs.map(run => `visualdl-scalar-${run.label}-${tag}.${DownloadDataTypes[type]}`), + `visualdl-scalar-${tag}.zip` + ); + }, + [runs, tag] + ); + const toolbox = useMemo( () => [ { @@ -241,17 +265,17 @@ const ScalarChart: FunctionComponent = ({ }, { label: t('scalar:download-data'), - onClick: () => - saveFile( - runs.map(run => `/scalar/data?${queryString.stringify({run: run.label, tag})}`), - runs.map(run => `visualdl-scalar-${run.label}-${tag}.tsv`), - `visualdl-scalar-${tag}.zip` - ) + children: Object.keys(DownloadDataTypes) + .sort((a, b) => a.localeCompare(b)) + .map(format => ({ + label: t('scalar:download-data-format', {format}), + onClick: () => downloadData(format as keyof typeof DownloadDataTypes) + })) } ] } ], - [runs, t, tag, toggleMaximized, toggleYAxisType] + [downloadData, t, toggleMaximized, toggleYAxisType] ); // display error only on first fetch diff --git a/frontend/packages/demo/package.json b/frontend/packages/demo/package.json index f022d091..a8345267 100644 --- a/frontend/packages/demo/package.json +++ b/frontend/packages/demo/package.json @@ -1,6 +1,6 @@ { "name": "@visualdl/demo", - "version": "2.1.0-1", + "version": "2.1.1", "description": "A platform to visualize the deep learning process and result.", "keywords": [ "visualdl", diff --git a/frontend/packages/mock/data/scalar/data.ts b/frontend/packages/mock/data/scalar/data.ts index 6d6ed37e..f384b2fb 100644 --- a/frontend/packages/mock/data/scalar/data.ts +++ b/frontend/packages/mock/data/scalar/data.ts @@ -17,7 +17,14 @@ import {Request, Response} from 'express'; export default (req: Request, res: Response) => { - const {run, tag} = req.query; - res.setHeader('Content-Type', 'text/tab-separated-values'); - return `scalar\n${run}\n${tag}`; + const {run, tag, type} = req.query; + switch (type) { + case 'tsv': + res.setHeader('Content-Type', 'text/tab-separated-values'); + break; + case 'csv': + res.setHeader('Content-Type', 'text/comma-separated-values'); + break; + } + return `scalar\n${run}\n${tag}\n${type}`; }; diff --git a/frontend/packages/mock/package.json b/frontend/packages/mock/package.json index a2c501c8..3d376f95 100644 --- a/frontend/packages/mock/package.json +++ b/frontend/packages/mock/package.json @@ -1,6 +1,6 @@ { "name": "@visualdl/mock", - "version": "2.1.0-1", + "version": "2.1.1", "description": "A platform to visualize the deep learning process and result.", "keywords": [ "visualdl", diff --git a/frontend/packages/netron/package.json b/frontend/packages/netron/package.json index d22bedec..8476cae6 100644 --- a/frontend/packages/netron/package.json +++ b/frontend/packages/netron/package.json @@ -1,6 +1,6 @@ { "name": "@visualdl/netron", - "version": "2.1.0-1", + "version": "2.1.1", "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 b21e78c3..e8683904 100644 --- a/frontend/packages/server/package.json +++ b/frontend/packages/server/package.json @@ -1,6 +1,6 @@ { "name": "@visualdl/server", - "version": "2.1.0-1", + "version": "2.1.1", "description": "A platform to visualize the deep learning process and result.", "keywords": [ "visualdl", @@ -36,7 +36,7 @@ "ecosystem.config.d.ts" ], "dependencies": { - "@visualdl/core": "2.1.0-1", + "@visualdl/core": "2.1.1", "dotenv": "8.2.0", "enhanced-resolve": "5.4.1", "express": "4.17.1", @@ -47,14 +47,14 @@ "@types/enhanced-resolve": "3.0.6", "@types/express": "4.17.9", "@types/node": "14.14.16", - "@visualdl/mock": "2.1.0-1", + "@visualdl/mock": "2.1.1", "cross-env": "7.0.3", "nodemon": "2.0.6", "ts-node": "9.1.1", "typescript": "4.0.5" }, "optionalDependencies": { - "@visualdl/demo": "2.1.0-1" + "@visualdl/demo": "2.1.1" }, "engines": { "node": ">=12", diff --git a/frontend/packages/wasm/package.json b/frontend/packages/wasm/package.json index 4f9c2c08..c5617d67 100644 --- a/frontend/packages/wasm/package.json +++ b/frontend/packages/wasm/package.json @@ -1,6 +1,6 @@ { "name": "@visualdl/wasm", - "version": "2.1.0-1", + "version": "2.1.1", "title": "VisualDL", "description": "A platform to visualize the deep learning process and result.", "keywords": [ diff --git a/frontend/scripts/lint-staged.sh b/frontend/scripts/lint-staged.sh new file mode 100755 index 00000000..92a0cc31 --- /dev/null +++ b/frontend/scripts/lint-staged.sh @@ -0,0 +1,11 @@ +#!/bin/bash + +set -e + +echo $0 + +SCRIPT_DIR="$( cd "$( dirname "${BASH_SOURCE[0]}" )" && pwd )" + +cd $SCRIPT_DIR/.. + +./node_modules/.bin/lint-staged --no-stash -- GitLab