未验证 提交 579873fe 编写于 作者: P Peter Pan 提交者: GitHub

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
上级 34b4085b
...@@ -21,10 +21,9 @@ repos: ...@@ -21,10 +21,9 @@ repos:
hooks: hooks:
- id: fe - id: fe
name: lint-staged name: lint-staged
entry: cd frontend && lint-staged entry: ./frontend/scripts/lint-staged.sh
language: node language: node
files: ^frontend/ files: ^frontend/
pass_filenames: false
description: lint frontend code by lint-staged description: lint frontend code by lint-staged
- repo: meta - repo: meta
hooks: hooks:
......
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
"packages": [ "packages": [
"packages/*" "packages/*"
], ],
"version": "2.1.0-1", "version": "2.1.1",
"npmClient": "yarn", "npmClient": "yarn",
"useWorkspaces": true, "useWorkspaces": true,
"command": { "command": {
......
{ {
"name": "@visualdl/cli", "name": "@visualdl/cli",
"version": "2.1.0-1", "version": "2.1.1",
"description": "A platform to visualize the deep learning process and result.", "description": "A platform to visualize the deep learning process and result.",
"keywords": [ "keywords": [
"visualdl", "visualdl",
...@@ -34,7 +34,7 @@ ...@@ -34,7 +34,7 @@
"dist" "dist"
], ],
"dependencies": { "dependencies": {
"@visualdl/server": "2.1.0-1", "@visualdl/server": "2.1.1",
"open": "7.3.0", "open": "7.3.0",
"ora": "5.1.0", "ora": "5.1.0",
"pm2": "4.5.1", "pm2": "4.5.1",
......
{ {
"name": "@visualdl/core", "name": "@visualdl/core",
"version": "2.1.0-1", "version": "2.1.1",
"description": "A platform to visualize the deep learning process and result.", "description": "A platform to visualize the deep learning process and result.",
"keywords": [ "keywords": [
"visualdl", "visualdl",
...@@ -35,8 +35,8 @@ ...@@ -35,8 +35,8 @@
], ],
"dependencies": { "dependencies": {
"@tippyjs/react": "4.2.0", "@tippyjs/react": "4.2.0",
"@visualdl/netron": "2.1.0-1", "@visualdl/netron": "2.1.1",
"@visualdl/wasm": "2.1.0-1", "@visualdl/wasm": "2.1.1",
"bignumber.js": "9.0.1", "bignumber.js": "9.0.1",
"d3": "6.3.1", "d3": "6.3.1",
"d3-format": "2.0.0", "d3-format": "2.0.0",
...@@ -105,7 +105,7 @@ ...@@ -105,7 +105,7 @@
"@types/react-router-dom": "5.1.6", "@types/react-router-dom": "5.1.6",
"@types/snowpack-env": "2.3.3", "@types/snowpack-env": "2.3.3",
"@types/styled-components": "5.1.7", "@types/styled-components": "5.1.7",
"@visualdl/mock": "2.1.0-1", "@visualdl/mock": "2.1.1",
"babel-plugin-styled-components": "1.12.0", "babel-plugin-styled-components": "1.12.0",
"dotenv": "8.2.0", "dotenv": "8.2.0",
"enhanced-resolve": "5.4.1", "enhanced-resolve": "5.4.1",
......
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="512" height="512" viewBox="0 0 512 512">
<path d="M179.2 256l230.4-219.429-38.4-36.572-268.8 256 268.8 256 38.4-36.572z"></path>
</svg>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="512" height="512" viewBox="0 0 512 512">
<path d="M332.8 256l-230.4-219.429 38.4-36.572 268.8 256-268.8 256-38.4-36.572z"></path>
</svg>
{ {
"download-data": "Download data", "download-data": "Download data",
"download-data-format": "In {{format}}",
"download-image": "Download image", "download-image": "Download image",
"ignore-outliers": "Ignore outliers in chart scaling", "ignore-outliers": "Ignore outliers in chart scaling",
"max": "Max.", "max": "Max.",
......
{ {
"download-data": "下载数据", "download-data": "下载数据",
"download-data-format": "{{format}} 格式",
"download-image": "下载图片", "download-image": "下载图片",
"ignore-outliers": "图表缩放时忽略极端值", "ignore-outliers": "图表缩放时忽略极端值",
"max": "最大值", "max": "最大值",
......
...@@ -48,7 +48,7 @@ const ToolboxItem = styled.a<{active?: boolean}>` ...@@ -48,7 +48,7 @@ const ToolboxItem = styled.a<{active?: boolean}>`
} }
`; `;
const ChartToolboxMenu = styled.div` const ChartToolboxMenuWrapper = styled.div`
background-color: var(--background-color); background-color: var(--background-color);
${transitionProps('background-color')}; ${transitionProps('background-color')};
...@@ -65,9 +65,16 @@ const ChartToolboxMenu = styled.div` ...@@ -65,9 +65,16 @@ const ChartToolboxMenu = styled.div`
} }
`; `;
const ChartToolboxMenuIcon = styled(Icon)`
vertical-align: middle;
font-size: 78%;
margin-left: 0.6em;
`;
interface ChartToolboxItemChild { interface ChartToolboxItemChild {
label: string; label: string;
onClick?: () => unknown; onClick?: () => unknown;
children?: ChartToolboxItemChild[];
} }
type BaseChartToolboxItem = { type BaseChartToolboxItem = {
...@@ -169,17 +176,45 @@ const ToggleChartToolbox: FunctionComponent<ToggleChartToolboxItem> = ({ ...@@ -169,17 +176,45 @@ const ToggleChartToolbox: FunctionComponent<ToggleChartToolboxItem> = ({
); );
}; };
const ChartToolboxMenu: FunctionComponent<ChartToolboxItemChild> = ({label, onClick, children}) => {
return children ? (
<Tippy
content={
<ChartToolboxMenuWrapper>
{children.map((item, index) => (
<ChartToolboxMenu {...item} key={index} />
))}
</ChartToolboxMenuWrapper>
}
placement="right-start"
animation="shift-away-subtle"
interactive
hideOnClick={false}
arrow={false}
role="menu"
theme="menu"
offset={[0, 0]}
>
<a>
{label} <ChartToolboxMenuIcon type="chevron-right" />
</a>
</Tippy>
) : (
<ChartToolboxMenuWrapper>
<a onClick={() => onClick?.()}>{label}</a>
</ChartToolboxMenuWrapper>
);
};
const MenuChartToolbox: FunctionComponent<MenuChartToolboxItem> = ({icon, menuList}) => { const MenuChartToolbox: FunctionComponent<MenuChartToolboxItem> = ({icon, menuList}) => {
return ( return (
<Tippy <Tippy
content={ content={
<ChartToolboxMenu> <ChartToolboxMenuWrapper>
{menuList.map((item, index) => ( {menuList.map((item, index) => (
<a key={index} onClick={() => item.onClick?.()}> <ChartToolboxMenu {...item} key={index} />
{item.label}
</a>
))} ))}
</ChartToolboxMenu> </ChartToolboxMenuWrapper>
} }
placement="right-start" placement="right-start"
animation="shift-away-subtle" animation="shift-away-subtle"
......
...@@ -45,6 +45,12 @@ import {useRunningRequest} from '~/hooks/useRequest'; ...@@ -45,6 +45,12 @@ import {useRunningRequest} from '~/hooks/useRequest';
import {useTranslation} from 'react-i18next'; import {useTranslation} from 'react-i18next';
import useWebAssembly from '~/hooks/useWebAssembly'; import useWebAssembly from '~/hooks/useWebAssembly';
const DownloadDataTypes = {
csv: 'csv',
tsv: 'tsv'
// excel: 'xlsx'
} as const;
const labelFormatter = format('.8'); const labelFormatter = format('.8');
const Wrapper = styled.div` const Wrapper = styled.div`
...@@ -211,6 +217,24 @@ const ScalarChart: FunctionComponent<ScalarChartProps> = ({ ...@@ -211,6 +217,24 @@ const ScalarChart: FunctionComponent<ScalarChartProps> = ({
[formatter, ranges, xAxisType, yAxisType] [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( const toolbox = useMemo(
() => [ () => [
{ {
...@@ -241,17 +265,17 @@ const ScalarChart: FunctionComponent<ScalarChartProps> = ({ ...@@ -241,17 +265,17 @@ const ScalarChart: FunctionComponent<ScalarChartProps> = ({
}, },
{ {
label: t('scalar:download-data'), label: t('scalar:download-data'),
onClick: () => children: Object.keys(DownloadDataTypes)
saveFile( .sort((a, b) => a.localeCompare(b))
runs.map(run => `/scalar/data?${queryString.stringify({run: run.label, tag})}`), .map(format => ({
runs.map(run => `visualdl-scalar-${run.label}-${tag}.tsv`), label: t('scalar:download-data-format', {format}),
`visualdl-scalar-${tag}.zip` onClick: () => downloadData(format as keyof typeof DownloadDataTypes)
) }))
} }
] ]
} }
], ],
[runs, t, tag, toggleMaximized, toggleYAxisType] [downloadData, t, toggleMaximized, toggleYAxisType]
); );
// display error only on first fetch // display error only on first fetch
......
{ {
"name": "@visualdl/demo", "name": "@visualdl/demo",
"version": "2.1.0-1", "version": "2.1.1",
"description": "A platform to visualize the deep learning process and result.", "description": "A platform to visualize the deep learning process and result.",
"keywords": [ "keywords": [
"visualdl", "visualdl",
......
...@@ -17,7 +17,14 @@ ...@@ -17,7 +17,14 @@
import {Request, Response} from 'express'; import {Request, Response} from 'express';
export default (req: Request, res: Response) => { export default (req: Request, res: Response) => {
const {run, tag} = req.query; const {run, tag, type} = req.query;
res.setHeader('Content-Type', 'text/tab-separated-values'); switch (type) {
return `scalar\n${run}\n${tag}`; 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}`;
}; };
{ {
"name": "@visualdl/mock", "name": "@visualdl/mock",
"version": "2.1.0-1", "version": "2.1.1",
"description": "A platform to visualize the deep learning process and result.", "description": "A platform to visualize the deep learning process and result.",
"keywords": [ "keywords": [
"visualdl", "visualdl",
......
{ {
"name": "@visualdl/netron", "name": "@visualdl/netron",
"version": "2.1.0-1", "version": "2.1.1",
"description": "A platform to visualize the deep learning process and result.", "description": "A platform to visualize the deep learning process and result.",
"keywords": [ "keywords": [
"visualdl", "visualdl",
......
{ {
"name": "@visualdl/server", "name": "@visualdl/server",
"version": "2.1.0-1", "version": "2.1.1",
"description": "A platform to visualize the deep learning process and result.", "description": "A platform to visualize the deep learning process and result.",
"keywords": [ "keywords": [
"visualdl", "visualdl",
...@@ -36,7 +36,7 @@ ...@@ -36,7 +36,7 @@
"ecosystem.config.d.ts" "ecosystem.config.d.ts"
], ],
"dependencies": { "dependencies": {
"@visualdl/core": "2.1.0-1", "@visualdl/core": "2.1.1",
"dotenv": "8.2.0", "dotenv": "8.2.0",
"enhanced-resolve": "5.4.1", "enhanced-resolve": "5.4.1",
"express": "4.17.1", "express": "4.17.1",
...@@ -47,14 +47,14 @@ ...@@ -47,14 +47,14 @@
"@types/enhanced-resolve": "3.0.6", "@types/enhanced-resolve": "3.0.6",
"@types/express": "4.17.9", "@types/express": "4.17.9",
"@types/node": "14.14.16", "@types/node": "14.14.16",
"@visualdl/mock": "2.1.0-1", "@visualdl/mock": "2.1.1",
"cross-env": "7.0.3", "cross-env": "7.0.3",
"nodemon": "2.0.6", "nodemon": "2.0.6",
"ts-node": "9.1.1", "ts-node": "9.1.1",
"typescript": "4.0.5" "typescript": "4.0.5"
}, },
"optionalDependencies": { "optionalDependencies": {
"@visualdl/demo": "2.1.0-1" "@visualdl/demo": "2.1.1"
}, },
"engines": { "engines": {
"node": ">=12", "node": ">=12",
......
{ {
"name": "@visualdl/wasm", "name": "@visualdl/wasm",
"version": "2.1.0-1", "version": "2.1.1",
"title": "VisualDL", "title": "VisualDL",
"description": "A platform to visualize the deep learning process and result.", "description": "A platform to visualize the deep learning process and result.",
"keywords": [ "keywords": [
......
#!/bin/bash
set -e
echo $0
SCRIPT_DIR="$( cd "$( dirname "${BASH_SOURCE[0]}" )" && pwd )"
cd $SCRIPT_DIR/..
./node_modules/.bin/lint-staged --no-stash
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册