fix: translation fix

frontend/packages/core/components/ChartPage.tsx

@@ -155,13 +155,13 @@ const ChartPage = <T extends Item>({
                     ) : (
                         <Empty height={rem(500)}>
                             {search ? (
-                                <Trans i18nKey="search-empty">
+                                <Trans i18nKey="common:search-empty">
                                     Nothing found. Please try again with another word.
                                     <br />
                                     Or you can <a onClick={() => setInputValue('')}>see all charts</a>.
                                 </Trans>
                             ) : (
-                                t('empty')
+                                t('common:empty')
                             )}
                         </Empty>
                     )}
@@ -174,14 +174,14 @@ const ChartPage = <T extends Item>({
         <div className={className}>
             <Search>
                 <SearchInput
-                    placeholder={t('search-tags')}
+                    placeholder={t('common:search-tags')}
                     rounded
                     value={inputValue}
                     onChange={(value: string) => setInputValue(value)}
                 />
             </Search>
             {searchValue ? (
-                <ChartCollapse title={t('search-result')} total={matchedTags.length}>
+                <ChartCollapse title={t('common:search-result')} total={matchedTags.length}>
                     {withCharts(pageMatchedTags, true)}
                     {pageMatchedTags.length ? <StyledPagination page={page} total={total} onChange={setPage} /> : null}
                 </ChartCollapse>
@@ -198,7 +198,7 @@ const ChartPage = <T extends Item>({
                 ))
             ) : (
                 <Empty height={`calc(100vh - ${headerHeight} - ${rem(96)})`}>
-                    <Trans i18nKey="unselected-empty">
+                    <Trans i18nKey="common:unselected-empty">
                         Nothing selected.
                         <br />
                         Please select display data from right side.

frontend/packages/core/components/GraphsPage/NodeInfo.tsx

@@ -40,7 +40,7 @@ const PropertyList = styled(DataList)`
 const NodeInfo: FunctionComponent<NodeInfoProps> = props => {
     const {t} = useTranslation('graphs');
     if (!props.node) {
-        return <p>{t('click-node')}</p>;
+        return <p>{t('graphs:click-node')}</p>;
     }
 
     const node = props.node;
@@ -50,10 +50,10 @@ const NodeInfo: FunctionComponent<NodeInfoProps> = props => {
             return (
                 <PropertyList
                     items={[
-                        {key: t('node-type'), value: typeName[node.type]},
-                        {key: t('node-name'), value: node.name},
-                        {key: t('node-data-shape'), value: node.shape},
-                        {key: t('node-data-type'), value: node.data_type}
+                        {key: t('graphs:node-type'), value: typeName[node.type]},
+                        {key: t('graphs:node-name'), value: node.name},
+                        {key: t('graphs:node-data-shape'), value: node.shape},
+                        {key: t('graphs:node-data-type'), value: node.data_type}
                     ]}
                 />
             );
@@ -61,15 +61,15 @@ const NodeInfo: FunctionComponent<NodeInfoProps> = props => {
             return (
                 <PropertyList
                     items={[
-                        {key: t('node-type'), value: typeName[node.type]},
-                        {key: t('input'), value: node.input},
-                        {key: t('op-type'), value: node.opType},
-                        {key: t('output'), value: node.output}
+                        {key: t('graphs:node-type'), value: typeName[node.type]},
+                        {key: t('graphs:input'), value: node.input},
+                        {key: t('graphs:op-type'), value: node.opType},
+                        {key: t('graphs:output'), value: node.output}
                     ]}
                 />
             );
         case 'unknown':
-            return <PropertyList items={[{key: t('node-type'), value: typeName[node.guessType]}]} />;
+            return <PropertyList items={[{key: t('graphs:node-type'), value: typeName[node.guessType]}]} />;
         default:
             return null;
     }

frontend/packages/core/components/HighDimensionalPage/HighDimensionalChart.tsx

@@ -101,11 +101,11 @@ const HighDimensionalChart: FunctionComponent<HighDimensionalChartProps> = ({
     }, [points]);
 
     if (!data && error) {
-        return <Empty>{t('error')}</Empty>;
+        return <Empty>{t('common:error')}</Empty>;
     }
 
     if (!data && !loading) {
-        return <Empty>{t('empty')}</Empty>;
+        return <Empty>{t('common:empty')}</Empty>;
     }
 
     return <StyledScatterChart loading={loading} data={chartData} gl={dimension === '3d'} />;

frontend/packages/core/components/Image.tsx

@@ -52,7 +52,7 @@ const Image = React.forwardRef<ImageRef, ImageProps>(({src, cache}, ref) => {
     }
 
     if (error) {
-        return <div>{t('error')}</div>;
+        return <div>{t('common:error')}</div>;
     }
 
     return <img src={url} />;

frontend/packages/core/components/Pagination.tsx

@@ -56,21 +56,21 @@ const Pagination: FunctionComponent<PaginationProps & WithStyled> = ({page, tota
         <Wrapper className={className}>
             <div>
                 <Button disabled={currentPage <= 1} onClick={() => setPage(currentPage - 1)}>
-                    {t('previous-page')}
+                    {t('common:previous-page')}
                 </Button>
                 <Button disabled={currentPage >= total} onClick={() => setPage(currentPage + 1)}>
-                    {t('next-page')}
+                    {t('common:next-page')}
                 </Button>
             </div>
             <div>
-                <span>{t('total-page', {count: total})}</span>
+                <span>{t('common:total-page', {count: total})}</span>
                 <Input
                     value={jumpPage}
                     onChange={value => setJumpPage(value)}
                     onKeyDown={e => e.key === 'Enter' && setPage(jumpPage)}
                 />
                 <Button onClick={() => setPage(jumpPage)} type="primary">
-                    {t('confirm')}
+                    {t('common:confirm')}
                 </Button>
             </div>
         </Wrapper>

frontend/packages/core/components/RunAside.tsx

@@ -135,16 +135,16 @@ const RunAside: FunctionComponent<RunAsideProps> = ({
         <Aside>
             {children}
             <section className="run-section">
-                <Field className="run-select" label={t('select-runs')}>
+                <Field className="run-select" label={t('common:select-runs')}>
                     <SearchInput
                         className="search-input"
                         value={search}
                         onChange={setSearch}
-                        placeholder={t('search-runs')}
+                        placeholder={t('common:search-runs')}
                         rounded
                     />
                     <Checkbox value={selectAll} onChange={toggleSelectAll}>
-                        {t('select-all')}
+                        {t('common:select-all')}
                     </Checkbox>
                     <div className="run-list">
                         {filteredRuns.map((run, index) => (

frontend/packages/core/components/SamplesPage/SampleChart.tsx

@@ -177,7 +177,7 @@ const SampleChart: FunctionComponent<SampleChartProps> = ({run, tag, brightness,
                 items={[
                     {
                         icon: 'download',
-                        tooltip: t('download-image'),
+                        tooltip: t('samples:download-image'),
                         onClick: saveImage
                     }
                 ]}

frontend/packages/core/components/SamplesPage/StepSlider.tsx

@@ -45,7 +45,7 @@ const StepSlider: FunctionComponent<StepSliderProps> = ({onChange, onChangeCompl
     return (
         <>
             <Label>
-                <span>{`${t('step')}: ${steps[step] ?? '...'}`}</span>
+                <span>{`${t('samples:step')}: ${steps[step] ?? '...'}`}</span>
                 {children && <span>{children}</span>}
             </Label>
             <FullWidthRangeSlider

frontend/packages/core/components/ScalarsPage/ScalarChart.tsx

@@ -205,25 +205,25 @@ const ScalarChart: FunctionComponent<ScalarChartProps> = ({
                     {
                         icon: 'maximize',
                         activeIcon: 'minimize',
-                        tooltip: t('maximize'),
-                        activeTooltip: t('minimize'),
+                        tooltip: t('scalars:maximize'),
+                        activeTooltip: t('scalars:minimize'),
                         toggle: true,
                         onClick: toggleMaximized
                     },
                     {
                         icon: 'restore-size',
-                        tooltip: t('restore'),
+                        tooltip: t('scalars:restore'),
                         onClick: () => echart.current?.restore()
                     },
                     {
                         icon: 'log-axis',
-                        tooltip: t('axis'),
+                        tooltip: t('scalars:axis'),
                         toggle: true,
                         onClick: toggleYAxisType
                     },
                     {
                         icon: 'download',
-                        tooltip: t('download-image'),
+                        tooltip: t('scalars:download-image'),
                         onClick: () => echart.current?.saveAsImage()
                     }
                 ]}

frontend/packages/core/components/Select.tsx

@@ -215,7 +215,7 @@ const Select = <T extends unknown>({
                 ? multiple
                     ? (value as T[]).map(findLabelByValue).join(' / ')
                     : findLabelByValue(value as T)
-                : placeholder || t('select'),
+                : placeholder || t('common:select'),
         [multiple, value, findLabelByValue, isSelected, placeholder, t]
     );
 
@@ -227,7 +227,7 @@ const Select = <T extends unknown>({
             </Trigger>
             <List opened={isOpened} empty={isListEmpty}>
                 {isListEmpty
-                    ? t('empty')
+                    ? t('common:empty')
                     : list.map((item, index) => {
                           if (multiple) {
                               return (

frontend/packages/core/pages/404.tsx

@@ -14,7 +14,7 @@ const Error = styled.div`
 const Error404: NextI18NextPage = () => {
     const {t} = useTranslation('errors');
 
-    return <Error>404 - {t('page-not-found')}</Error>;
+    return <Error>404 - {t('errors:page-not-found')}</Error>;
 };
 
 // 404 page cannot have getInitialProps or getServerSideProps

frontend/packages/core/pages/_error.tsx

@@ -18,7 +18,11 @@ interface ErrorProps {
 const Error: NextI18NextPage<ErrorProps> = ({statusCode}) => {
     const {t} = useTranslation('errors');
 
-    return <ErrorDiv>{statusCode ? t('error-with-status', {statusCode}) : t('error-without-status')}</ErrorDiv>;
+    return (
+        <ErrorDiv>
+            {statusCode ? t('errors:error-with-status', {statusCode}) : t('errors:error-without-status')}
+        </ErrorDiv>
+    );
 };
 
 Error.getInitialProps = ({res, err}) => {

frontend/packages/core/pages/graphs.tsx

@@ -264,21 +264,21 @@ const Graphs: NextI18NextPage = () => {
         <AsideSection>
             <SubSection>
                 <Button rounded type="primary" icon="download" onClick={downloadImage}>
-                    {t('download-image')}
+                    {t('graphs:download-image')}
                 </Button>
                 <Button rounded type="primary" icon="revert" onClick={fitScreen}>
-                    {t('restore-image')}
+                    {t('graphs:restore-image')}
                 </Button>
             </SubSection>
 
             <SubSection>
-                <Field label={`${t('scale')}:`}>
+                <Field label={`${t('graphs:scale')}:`}>
                     <RangeSlider min={MIN_SCALE} max={MAX_SCALE} step={0.1} value={scale} onChange={setScale} />
                 </Field>
             </SubSection>
 
             <SubSection>
-                <Field label={`${t('node-info')}:`} />
+                <Field label={`${t('graphs:node-info')}:`} />
                 <NodeInfo node={currentNode} />
             </SubSection>
         </AsideSection>

frontend/packages/core/pages/high-dimensional.tsx

@@ -77,13 +77,13 @@ const HighDimensional: NextI18NextPage = () => {
             </Field>
             <Field>
                 <Checkbox value={labelVisibility} onChange={setLabelVisibility}>
-                    {t('display-all-label')}
+                    {t('high-dimensional:display-all-label')}
                 </Checkbox>
             </Field>
             <AsideDivider />
             <AsideTitle>
                 <StyledIcon type="dimension" />
-                {t('dimension')}
+                {t('high-dimensional:dimension')}
             </AsideTitle>
             <Field>
                 <RadioGroup value={dimension} onChange={value => setDimension(value)}>
@@ -97,7 +97,7 @@ const HighDimensional: NextI18NextPage = () => {
             <AsideDivider />
             <AsideTitle>
                 <StyledIcon type="reduction" />
-                {t('reduction-method')}
+                {t('high-dimensional:reduction-method')}
             </AsideTitle>
             <Field>
                 <RadioGroup value={reduction} onChange={value => setReduction(value)}>

frontend/packages/core/pages/samples.tsx

@@ -57,16 +57,16 @@ const Samples: NextI18NextPage = () => {
         >
             <section>
                 <Checkbox value={showActualSize} onChange={setShowActualSize}>
-                    {t('show-actual-size')}
+                    {t('samples:show-actual-size')}
                 </Checkbox>
             </section>
             <section>
-                <Field label={t('brightness')}>
+                <Field label={t('samples:brightness')}>
                     <Slider min={0} max={2} step={0.01} value={brightness} onChange={setBrightness} />
                 </Field>
             </section>
             <section>
-                <Field label={t('contrast')}>
+                <Field label={t('samples:contrast')}>
                     <Slider min={0} max={2} step={0.01} value={contrast} onChange={setContrast} />
                 </Field>
             </section>

frontend/packages/core/pages/scalars.tsx

@@ -48,7 +48,6 @@ const Scalars: NextI18NextPage = () => {
     const [xAxis, setXAxis] = useState<XAxis>(xAxisValues[0]);
 
     const [tooltipSorting, setTooltipSorting] = useState<TooltipSorting>(toolTipSortingValues[0]);
-    const onChangeTooltipSorting = (value: TooltipSorting) => setTooltipSorting(value);
 
     const [ignoreOutliers, setIgnoreOutliers] = useState(false);
 
@@ -62,24 +61,24 @@ const Scalars: NextI18NextPage = () => {
         >
             <section>
                 <Checkbox value={ignoreOutliers} onChange={setIgnoreOutliers}>
-                    {t('ignore-outliers')}
+                    {t('scalars:ignore-outliers')}
                 </Checkbox>
                 <TooltipSortingDiv>
-                    <span>{t('tooltip-sorting')}</span>
+                    <span>{t('scalars:tooltip-sorting')}</span>
                     <Select
                         list={toolTipSortingValues.map(value => ({label: t(`tooltip-sorting-value.${value}`), value}))}
                         value={tooltipSorting}
-                        onChange={onChangeTooltipSorting}
+                        onChange={setTooltipSorting}
                     />
                 </TooltipSortingDiv>
             </section>
             <section>
-                <Field label={t('smoothing')}>
+                <Field label={t('scalars:smoothing')}>
                     <Slider min={0} max={0.99} step={0.01} value={smoothing} onChangeComplete={setSmoothing} />
                 </Field>
             </section>
             <section>
-                <Field label={t('x-axis')}>
+                <Field label={t('scalars:x-axis')}>
                     <RadioGroup value={xAxis} onChange={setXAxis}>
                         {xAxisValues.map(value => (
                             <RadioButton key={value} value={value}>

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

@@ -8,7 +8,6 @@
     "search-result": "搜索结果",
     "search-empty": "没有找到您期望的内容，你可以尝试其他搜索词<1/>或者点击<3>查看全部图表</3>",
     "unselected-empty": "未选中任何数据<1/>请在右侧操作栏选择要展示的数据",
-    "all": "全部",
     "empty": "空空如也",
     "select": "请选择",
     "select-all": "全选",