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

@@ -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:

frontend/lerna.json

@@ -2,7 +2,7 @@
     "packages": [
         "packages/*"
     ],
-    "version": "2.1.0-1",
+    "version": "2.1.1",
     "npmClient": "yarn",
     "useWorkspaces": true,
     "command": {

frontend/packages/cli/package.json

 {
     "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",

frontend/packages/core/package.json

 {
     "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",

frontend/packages/core/public/icons/chevron-left.svg

+<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>

frontend/packages/core/public/icons/chevron-right.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>

frontend/packages/core/public/locales/en/scalar.json

 {
     "download-data": "Download data",
+    "download-data-format": "In {{format}}",
     "download-image": "Download image",
     "ignore-outliers": "Ignore outliers in chart scaling",
     "max": "Max.",

frontend/packages/core/public/locales/zh/scalar.json

 {
     "download-data": "下载数据",
+    "download-data-format": "{{format}} 格式",
     "download-image": "下载图片",
     "ignore-outliers": "图表缩放时忽略极端值",
     "max": "最大值",

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<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}) => {
     return (
         <Tippy
             content={
-                <ChartToolboxMenu>
+                <ChartToolboxMenuWrapper>
                     {menuList.map((item, index) => (
-                        <a key={index} onClick={() => item.onClick?.()}>
-                            {item.label}
-                        </a>
+                        <ChartToolboxMenu {...item} key={index} />
                     ))}
-                </ChartToolboxMenu>
+                </ChartToolboxMenuWrapper>
             }
             placement="right-start"
             animation="shift-away-subtle"

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<ScalarChartProps> = ({
         [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<ScalarChartProps> = ({
                     },
                     {
                         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

frontend/packages/demo/package.json

 {
     "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",

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}`;
 };

frontend/packages/mock/package.json

 {
     "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",

frontend/packages/netron/package.json

 {
     "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",

frontend/packages/server/package.json

 {
     "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",

frontend/packages/wasm/package.json

 {
     "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": [

frontend/scripts/lint-staged.sh

+#!/bin/bash
+
+set -e
+
+echo $0
+
+SCRIPT_DIR="$( cd "$( dirname "${BASH_SOURCE[0]}" )" && pwd )"
+
+cd $SCRIPT_DIR/..
+
+./node_modules/.bin/lint-staged --no-stash