Skip to content

V
VisualDL

PaddlePaddle / VisualDL
大约 1 年 前同步成功

通知 88
Star 4655
Fork 642
V
VisualDL

体验新版 GitCode，发现更多精彩内容 >>

You need to sign in or sign up before continuing.
未验证 提交 b61595ea 编写于 作者: P Peter Pan 提交者： GitHub
浏览文件
操作

chore: add error tip when nothing get from backend (#659)

上级 ff057a44
隐藏空白更改
内联 并排
Showing with 256 addition and 125 deletion
frontend/packages/core/components/Error.tsx 0 → 100644
浏览文件 @ b61595ea
import React, {FunctionComponent} from 'react';
import {Trans, useTranslation} from '~/utils/i18n';
import {WithStyled, backgroundColor, em, link, rem, size, textColor, textLightColor} from '~/utils/style';
import styled from 'styled-components';
const Wrapper = styled.div`
display: flex;
justify-content: center;
align-items: center;
background-color: ${backgroundColor};
height: 100%;
width: 100%;
> .image {
background-image: url(${`${process.env.PUBLIC_PATH}/images/empty.svg`});
background-repeat: no-repeat;
background-position: center center;
background-size: 100% 100%;
${size(rem(244), rem(280))}
}
> .inner {
width: calc(50% - ${rem(280)});
color: ${textLightColor};
${link}
h4 {
color: ${textColor};
font-size: ${em(18)};
font-weight: 700;
}
p {
margin: 0;
}
ol {
padding-left: 2em;
line-height: 1.857142857;
}
}
`;
const Error: FunctionComponent<WithStyled> = ({className, children}) => {
const {t} = useTranslation('errors');
return (
<Wrapper className={className}>
<div className="image"></div>
<div className="inner">
{children || (
<>
<h4>{t('errors:common.title')}</h4>
<p>{t('errors:common.description')}</p>
<ol>
<li>
<Trans i18nKey="errors:common.1">
Log files are not generated. Please refer to&nbsp;
<a href="https://github.com/PaddlePaddle/VisualDL" target="_blank" rel="noreferrer">
README
</a>
&nbsp;to create log files.
</Trans>
</li>
<li>
<Trans i18nKey="errors:common.2">
Log files are generated but data is not written yet. Please refer to&nbsp;
<a
href="https://github.com/PaddlePaddle/VisualDL/blob/develop/docs/components/README.md"
target="_blank"
rel="noreferrer"
>
VisualDL User Guide
</a>
&nbsp;to write visualized data.
</Trans>
</li>
<li>
<Trans i18nKey="errors:common.3">
Log files are generated and data is writte. Please try to&nbsp;
<a href="javascript:location.reload()">Refresh</a>.
</Trans>
</li>
<li>
<Trans i18nKey="errors:common.4">
Log files are generated but path to log directory is wrong. Please check your
directory and try again.
</Trans>
</li>
</ol>
</>
)}
</div>
</Wrapper>
);
};
export default Error;
frontend/packages/core/pages/high-dimensional.tsx
浏览文件 @ b61595ea
......@@ -7,6 +7,7 @@ import {em, rem} from '~/utils/style';
import Checkbox from '~/components/Checkbox';
import Content from '~/components/Content';
import Error from '~/components/Error';
import Field from '~/components/Field';
import HighDimensionalChart from '~/components/HighDimensionalPage/HighDimensionalChart';
import Icon from '~/components/Icon';
......@@ -95,54 +96,55 @@ const HighDimensional: NextI18NextPage = () => {
const bottom = useMemo(() => <RunningToggle running={running} onToggle={setRunning} />, [running, setRunning]);
const aside = useMemo(
() => (
<Aside bottom={bottom}>
<AsideSection>
<AsideTitle>{t('common:select-runs')}</AsideTitle>
<StyledSelect list={labelList} value={label} onChange={setLabel} />
</AsideSection>
<AsideSection>
<Field>
<SearchInput placeholder={t('common:search')} value={search} onChange={setSearch} />
</Field>
<Field>
<Checkbox value={labelVisibility} onChange={setLabelVisibility}>
{t('high-dimensional:display-all-label')}
</Checkbox>
</Field>
</AsideSection>
<AsideSection>
<AsideTitle>
<StyledIcon type="dimension" />
{t('high-dimensional:dimension')}
</AsideTitle>
<Field>
<RadioGroup value={dimension} onChange={value => setDimension(value)}>
{dimensions.map(item => (
<RadioButton key={item} value={item}>
{t(item)}
</RadioButton>
))}
</RadioGroup>
</Field>
</AsideSection>
<AsideSection>
<AsideTitle>
<StyledIcon type="reduction" />
{t('high-dimensional:reduction-method')}
</AsideTitle>
<Field>
<RadioGroup value={reduction} onChange={value => setReduction(value)}>
{reductions.map(item => (
<RadioButton key={item} value={item}>
{t(item)}
</RadioButton>
))}
</RadioGroup>
</Field>
</AsideSection>
</Aside>
),
() =>
labelList.length ? (
<Aside bottom={bottom}>
<AsideSection>
<AsideTitle>{t('common:select-runs')}</AsideTitle>
<StyledSelect list={labelList} value={label} onChange={setLabel} />
</AsideSection>
<AsideSection>
<Field>
<SearchInput placeholder={t('common:search')} value={search} onChange={setSearch} />
</Field>
<Field>
<Checkbox value={labelVisibility} onChange={setLabelVisibility}>
{t('high-dimensional:display-all-label')}
</Checkbox>
</Field>
</AsideSection>
<AsideSection>
<AsideTitle>
<StyledIcon type="dimension" />
{t('high-dimensional:dimension')}
</AsideTitle>
<Field>
<RadioGroup value={dimension} onChange={value => setDimension(value)}>
{dimensions.map(item => (
<RadioButton key={item} value={item}>
{t(item)}
</RadioButton>
))}
</RadioGroup>
</Field>
</AsideSection>
<AsideSection>
<AsideTitle>
<StyledIcon type="reduction" />
{t('high-dimensional:reduction-method')}
</AsideTitle>
<Field>
<RadioGroup value={reduction} onChange={value => setReduction(value)}>
{reductions.map(item => (
<RadioButton key={item} value={item}>
{t(item)}
</RadioButton>
))}
</RadioGroup>
</Field>
</AsideSection>
</Aside>
) : null,
[t, bottom, dimension, label, labelList, labelVisibility, reduction, search]
);
......@@ -151,7 +153,9 @@ const HighDimensional: NextI18NextPage = () => {
<Preloader url="/runs" />
<Title>{t('common:high-dimensional')}</Title>
<Content aside={aside} loading={loading}>
{error ? (
{!loading && !list.length ? (
<Error />
) : error ? (
<div>{t('common:error')}</div>
) : loading ? null : (
<HighDimensionalChart
......
frontend/packages/core/pages/samples.tsx
浏览文件 @ b61595ea
......@@ -7,6 +7,7 @@ import React, {useCallback, useMemo, useState} from 'react';
import {AsideSection} from '~/components/Aside';
import Checkbox from '~/components/Checkbox';
import Content from '~/components/Content';
import Error from '~/components/Error';
import Field from '~/components/Field';
import Preloader from '~/components/Preloader';
import RunAside from '~/components/RunAside';
......@@ -49,31 +50,32 @@ const Samples: NextI18NextPage = () => {
const [contrast, setContrast] = useState(1);
const aside = useMemo(
() => (
<RunAside
runs={runs}
selectedRuns={selectedRuns}
onChangeRuns={onChangeRuns}
running={running}
onToggleRunning={setRunning}
>
<AsideSection>
<Checkbox value={showActualSize} onChange={setShowActualSize}>
{t('samples:show-actual-size')}
</Checkbox>
</AsideSection>
<AsideSection>
<Field label={t('samples:brightness')}>
<Slider min={0} max={2} step={0.01} value={brightness} onChange={setBrightness} />
</Field>
</AsideSection>
<AsideSection>
<Field label={t('samples:contrast')}>
<Slider min={0} max={2} step={0.01} value={contrast} onChange={setContrast} />
</Field>
</AsideSection>
</RunAside>
),
() =>
runs.length ? (
<RunAside
runs={runs}
selectedRuns={selectedRuns}
onChangeRuns={onChangeRuns}
running={running}
onToggleRunning={setRunning}
>
<AsideSection>
<Checkbox value={showActualSize} onChange={setShowActualSize}>
{t('samples:show-actual-size')}
</Checkbox>
</AsideSection>
<AsideSection>
<Field label={t('samples:brightness')}>
<Slider min={0} max={2} step={0.01} value={brightness} onChange={setBrightness} />
</Field>
</AsideSection>
<AsideSection>
<Field label={t('samples:contrast')}>
<Slider min={0} max={2} step={0.01} value={contrast} onChange={setContrast} />
</Field>
</AsideSection>
</RunAside>
) : null,
[t, brightness, contrast, onChangeRuns, running, runs, selectedRuns, showActualSize]
);
......@@ -97,12 +99,16 @@ const Samples: NextI18NextPage = () => {
<Preloader url="/images/tags" />
<Title>{t('common:samples')}</Title>
<Content aside={aside} loading={loadingRuns}>
<ChartPage
items={ungroupedSelectedTags}
chartSize={chartSize}
withChart={withChart}
loading={loadingRuns || loadingTags}
/>
{!loadingRuns && !runs.length ? (
<Error />
) : (
<ChartPage
items={ungroupedSelectedTags}
chartSize={chartSize}
withChart={withChart}
loading={loadingRuns || loadingTags}
/>
)}
</Content>
</>
);
......
frontend/packages/core/pages/scalars.tsx
浏览文件 @ b61595ea
......@@ -6,6 +6,7 @@ import {sortingMethodMap, xAxisMap} from '~/resource/scalars';
import {AsideSection} from '~/components/Aside';
import Checkbox from '~/components/Checkbox';
import Content from '~/components/Content';
import Error from '~/components/Error';
import Field from '~/components/Field';
import Preloader from '~/components/Preloader';
import RadioButton from '~/components/RadioButton';
......@@ -53,48 +54,49 @@ const Scalars: NextI18NextPage = () => {
const [ignoreOutliers, setIgnoreOutliers] = useState(false);
const aside = useMemo(
() => (
<RunAside
runs={runs}
selectedRuns={selectedRuns}
onChangeRuns={onChangeRuns}
running={running}
onToggleRunning={setRunning}
>
<AsideSection>
<Checkbox value={ignoreOutliers} onChange={setIgnoreOutliers}>
{t('scalars:ignore-outliers')}
</Checkbox>
<TooltipSortingDiv>
<span>{t('scalars:tooltip-sorting')}</span>
<Select
list={toolTipSortingValues.map(value => ({
label: t(`tooltip-sorting-value.${value}`),
value
}))}
value={tooltipSorting}
onChange={setTooltipSorting}
/>
</TooltipSortingDiv>
</AsideSection>
<AsideSection>
<Field label={t('scalars:smoothing')}>
<Slider min={0} max={0.99} step={0.01} value={smoothing} onChangeComplete={setSmoothing} />
</Field>
</AsideSection>
<AsideSection>
<Field label={t('scalars:x-axis')}>
<RadioGroup value={xAxis} onChange={setXAxis}>
{xAxisValues.map(value => (
<RadioButton key={value} value={value}>
{t(`x-axis-value.${value}`)}
</RadioButton>
))}
</RadioGroup>
</Field>
</AsideSection>
</RunAside>
),
() =>
runs.length ? (
<RunAside
runs={runs}
selectedRuns={selectedRuns}
onChangeRuns={onChangeRuns}
running={running}
onToggleRunning={setRunning}
>
<AsideSection>
<Checkbox value={ignoreOutliers} onChange={setIgnoreOutliers}>
{t('scalars:ignore-outliers')}
</Checkbox>
<TooltipSortingDiv>
<span>{t('scalars:tooltip-sorting')}</span>
<Select
list={toolTipSortingValues.map(value => ({
label: t(`tooltip-sorting-value.${value}`),
value
}))}
value={tooltipSorting}
onChange={setTooltipSorting}
/>
</TooltipSortingDiv>
</AsideSection>
<AsideSection>
<Field label={t('scalars:smoothing')}>
<Slider min={0} max={0.99} step={0.01} value={smoothing} onChangeComplete={setSmoothing} />
</Field>
</AsideSection>
<AsideSection>
<Field label={t('scalars:x-axis')}>
<RadioGroup value={xAxis} onChange={setXAxis}>
{xAxisValues.map(value => (
<RadioButton key={value} value={value}>
{t(`x-axis-value.${value}`)}
</RadioButton>
))}
</RadioGroup>
</Field>
</AsideSection>
</RunAside>
) : null,
[t, ignoreOutliers, onChangeRuns, running, runs, selectedRuns, smoothing, tooltipSorting, xAxis]
);
......@@ -120,7 +122,11 @@ const Scalars: NextI18NextPage = () => {
<Preloader url="/scalars/tags" />
<Title>{t('common:scalars')}</Title>
<Content aside={aside} loading={loadingRuns}>
<ChartPage items={tags} withChart={withChart} loading={loadingRuns || loadingTags} />
{!loadingRuns && !runs.length ? (
<Error />
) : (
<ChartPage items={tags} withChart={withChart} loading={loadingRuns || loadingTags} />
)}
</Content>
</>
);
......
frontend/packages/core/public/locales/en/errors.json
浏览文件 @ b61595ea
{
"error-with-status": "A {{statusCode}} error occurred on server",
"error-without-status": "An error occurred on the server",
"page-not-found": "Page Not Found"
"page-not-found": "Page Not Found",
"common": {
"title": "No visualized data.",
"description": "Possible reasons are:",
"1": "Log files are not generated. Please refer to <1>README</1> to create log files.",
"2": "Log files are generated but data is not written yet. Please refer to <1>VisualDL User Guide</1> to write visualized data.",
"3": "Log files are generated and data is writte. Please try to <1>Refresh</1>.",
"4": "Log files are generated but path to log directory is wrong. Please check your directory and try again."
}
}
frontend/packages/core/public/locales/zh/errors.json
浏览文件 @ b61595ea
{
"error-with-status": "服务器发生了一个 {{statusCode}} 错误",
"error-without-status": "服务器发生了一个错误",
"page-not-found": "页面不存在"
"page-not-found": "页面不存在",
"common": {
"title": "无可视化结果展示",
"description": "有以下几种可能原因，请您参考相应解决方案：",
"1": "未生成日志文件。请参考 <1>README</1> 创建日志文件。",
"2": "已生成日志文件，但尚未打点数据。请参考 <1>VisualDL使用指南</1> ，对需要进行可视化的数据进行打点记录。",
"3": "已生成文件并打点数据，请尝试 <1>刷新</1> 。",
"4": "已生成文件，但日志文件路径错误，请确保文件路径正确。"
}
}
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或