fix: fix typo (#856)

PaddlePaddle · Nov 26, 2020 · 51776d2 · 51776d2
1 parent 1050e28
commit 51776d2
Show file tree

Hide file tree

Showing 76 changed files with 921 additions and 40 deletions.
diff --git a/frontend/packages/cli/index.ts b/frontend/packages/cli/index.ts
@@ -1,5 +1,21 @@
 #!/usr/bin/env node
 
+/**
+ * Copyright 2020 Baidu Inc. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
 /* eslint-disable @typescript-eslint/no-var-requires */
 /* eslint-disable no-console */
 

diff --git a/frontend/packages/core/babel.config.js b/frontend/packages/core/babel.config.js
@@ -14,6 +14,8 @@
  * limitations under the License.
  */
 
+// cSpell:words esmodules
+
 module.exports = {
     extends: '@snowpack/app-scripts-react/babel.config.json',
     presets: [

diff --git a/frontend/packages/core/src/App.tsx b/frontend/packages/core/src/App.tsx
@@ -14,6 +14,8 @@
  * limitations under the License.
  */
 
+// cSpell:words pageview inited
+
 import React, {FunctionComponent, Suspense, useCallback, useEffect, useMemo, useState} from 'react';
 import {Redirect, Route, BrowserRouter as Router, Switch, useLocation} from 'react-router-dom';
 import {THEME, matchMedia} from '~/utils/theme';

diff --git a/frontend/packages/core/src/components/Chart.tsx b/frontend/packages/core/src/components/Chart.tsx
@@ -45,7 +45,7 @@ type ChartProps = {
 
 const Chart: FunctionComponent<ChartProps & WithStyled> = ({cid, width, height, className, children}) => {
     const [maximized, setMaximized] = useState(false);
-    const toggleMaximze = useCallback(
+    const toggleMaximize = useCallback(
         (id: symbol, value: boolean) => {
             if (id === cid) {
                 setMaximized(value);
@@ -54,11 +54,11 @@ const Chart: FunctionComponent<ChartProps & WithStyled> = ({cid, width, height,
         [cid]
     );
     useEffect(() => {
-        ee.on('toggle-chart-size', toggleMaximze);
+        ee.on('toggle-chart-size', toggleMaximize);
         return () => {
-            ee.off('toggle-chart-size', toggleMaximze);
+            ee.off('toggle-chart-size', toggleMaximize);
         };
-    }, [toggleMaximze]);
+    }, [toggleMaximize]);
 
     return (
         <Div

diff --git a/frontend/packages/core/src/components/ChartToolbox.tsx b/frontend/packages/core/src/components/ChartToolbox.tsx
@@ -65,10 +65,10 @@ type ToggleChartToolboxItem = {
     onClick?: (value: boolean) => unknown;
 } & BaseChartToolboxItem;
 
-export type ChartTooboxItem = NormalChartToolboxItem | ToggleChartToolboxItem;
+export type ChartToolboxItem = NormalChartToolboxItem | ToggleChartToolboxItem;
 
 type ChartToolboxProps = {
-    items: ChartTooboxItem[];
+    items: ChartToolboxItem[];
     reversed?: boolean;
     tooltipPlacement?: 'top' | 'bottom' | 'left' | 'right';
 };
@@ -98,7 +98,7 @@ const ChartToolbox: FunctionComponent<ChartToolboxProps & WithStyled> = ({
     );
 
     const getToolboxItem = useCallback(
-        (item: ChartTooboxItem, index: number) => (
+        (item: ChartToolboxItem, index: number) => (
             <ToolboxItem
                 key={index}
                 active={item.toggle && !item.activeIcon && activeStatus[index]}

diff --git a/frontend/packages/core/src/components/GraphPage/Argument.tsx b/frontend/packages/core/src/components/GraphPage/Argument.tsx
@@ -76,10 +76,10 @@ const Wrapper = styled.div`
 type ArgumentProps = {
     value: ArgumentType | PropertyType;
     expand?: boolean;
-    showNodeDodumentation?: () => unknown;
+    showNodeDocumentation?: () => unknown;
 };
 
-const Argument: FunctionComponent<ArgumentProps> = ({value, expand, showNodeDodumentation}) => {
+const Argument: FunctionComponent<ArgumentProps> = ({value, expand, showNodeDocumentation}) => {
     const [expanded, setExpanded] = useState(expand ?? false);
 
     const expandable = useMemo(() => {
@@ -105,7 +105,7 @@ const Argument: FunctionComponent<ArgumentProps> = ({value, expand, showNodeDodu
                     )}
                 </span>
                 {(value as PropertyType).documentation && (
-                    <a className="argument-operation" onClick={() => showNodeDodumentation?.()}>
+                    <a className="argument-operation" onClick={() => showNodeDocumentation?.()}>
                         <Icon type="question-circle" />
                     </a>
                 )}

diff --git a/frontend/packages/core/src/components/GraphPage/NodeDocumentationSidebar.tsx b/frontend/packages/core/src/components/GraphPage/NodeDocumentationSidebar.tsx
@@ -14,6 +14,8 @@
  * limitations under the License.
  */
 
+// cSpell:words strs
+
 import React, {FunctionComponent, useCallback} from 'react';
 import {Trans, useTranslation} from 'react-i18next';
 import {borderRadius, em, transitionProps} from '~/utils/style';

diff --git a/frontend/packages/core/src/components/GraphPage/NodePropertiesSidebar.tsx b/frontend/packages/core/src/components/GraphPage/NodePropertiesSidebar.tsx
@@ -24,19 +24,19 @@ import {useTranslation} from 'react-i18next';
 type NodePropertiesSidebarProps = {
     data?: PropertiesType | null;
     onClose?: () => unknown;
-    showNodeDodumentation?: () => unknown;
+    showNodeDocumentation?: () => unknown;
 };
 
 const NodePropertiesSidebar: FunctionComponent<NodePropertiesSidebarProps> = ({
     data,
     onClose,
-    showNodeDodumentation
+    showNodeDocumentation
 }) => {
     const {t} = useTranslation('graph');
 
     return (
         <GraphSidebar title={t('graph:node-properties')} onClose={onClose}>
-            <Properties {...data} showNodeDodumentation={showNodeDodumentation} />
+            <Properties {...data} showNodeDocumentation={showNodeDocumentation} />
         </GraphSidebar>
     );
 };

diff --git a/frontend/packages/core/src/components/GraphPage/Properties.tsx b/frontend/packages/core/src/components/GraphPage/Properties.tsx
@@ -30,10 +30,10 @@ const Header = styled.div`
 
 type PropertiesProps = PropertiesType & {
     expand?: boolean;
-    showNodeDodumentation?: () => unknown;
+    showNodeDocumentation?: () => unknown;
 };
 
-const Properties: FunctionComponent<PropertiesProps> = ({properties, groups, expand, showNodeDodumentation}) => {
+const Properties: FunctionComponent<PropertiesProps> = ({properties, groups, expand, showNodeDocumentation}) => {
     const {t} = useTranslation('graph');
 
     return (
@@ -43,7 +43,7 @@ const Properties: FunctionComponent<PropertiesProps> = ({properties, groups, exp
                     name={t(`graph:properties.${property.name}`)}
                     values={property.values}
                     key={index}
-                    showNodeDodumentation={showNodeDodumentation}
+                    showNodeDocumentation={showNodeDocumentation}
                 />
             ))}
             {groups?.map((group, index) => (
@@ -54,7 +54,7 @@ const Properties: FunctionComponent<PropertiesProps> = ({properties, groups, exp
                             {...property}
                             key={anotherIndex}
                             expand={expand}
-                            showNodeDodumentation={showNodeDodumentation}
+                            showNodeDocumentation={showNodeDocumentation}
                         />
                     ))}
                 </React.Fragment>

diff --git a/frontend/packages/core/src/components/GraphPage/Property.tsx b/frontend/packages/core/src/components/GraphPage/Property.tsx
@@ -49,18 +49,18 @@ const Wrapper = styled.div`
 
 type PropertyProps = NameValues<ArgumentType | PropertyType> & {
     expand?: boolean;
-    showNodeDodumentation?: () => unknown;
+    showNodeDocumentation?: () => unknown;
 };
 
-const Property: FunctionComponent<PropertyProps> = ({name, values, expand, showNodeDodumentation}) => {
+const Property: FunctionComponent<PropertyProps> = ({name, values, expand, showNodeDocumentation}) => {
     return (
         <Wrapper>
             <label className="property-name" title={name}>
                 {name}
             </label>
             <div className="property-values">
                 {values.map((value, index) => (
-                    <Argument key={index} value={value} expand={expand} showNodeDodumentation={showNodeDodumentation} />
+                    <Argument key={index} value={value} expand={expand} showNodeDocumentation={showNodeDocumentation} />
                 ))}
             </div>
         </Wrapper>

diff --git a/frontend/packages/core/src/components/GraphPage/Uploader.tsx b/frontend/packages/core/src/components/GraphPage/Uploader.tsx
@@ -22,16 +22,16 @@ import Icon from '~/components/Icon';
 import styled from 'styled-components';
 import {useTranslation} from 'react-i18next';
 
-const DropZone = styled.div<{actived: boolean}>`
+const DropZone = styled.div<{active: boolean}>`
     ${props =>
         sameBorder({
             width: '1px',
             type: 'dashed',
             radius: em(16),
-            color: props.actived ? 'var(--primary-color)' : undefined
+            color: props.active ? 'var(--primary-color)' : undefined
         })}
     background-color: ${props =>
-        props.actived ? 'var(--graph-uploader-active-background-color)' : 'var(--graph-uploader-background-color)'};
+        props.active ? 'var(--graph-uploader-active-background-color)' : 'var(--graph-uploader-background-color)'};
     ${size('43.2%', '68%')}
     display: flex;
     flex-direction: column;
@@ -82,12 +82,12 @@ type UploaderProps = {
 const Uploader: FunctionComponent<UploaderProps> = ({onClickUpload, onDropFiles}) => {
     const {t} = useTranslation('graph');
 
-    const [actived, setActived] = useState(false);
+    const [active, setActive] = useState(false);
     const onClick = useCallback(() => onClickUpload?.(), [onClickUpload]);
     const onDrop = useCallback(
         (e: React.DragEvent<HTMLDivElement>) => {
             e.preventDefault();
-            setActived(false);
+            setActive(false);
             if (e.dataTransfer && e.dataTransfer.files && e.dataTransfer.files.length) {
                 onDropFiles?.(e.dataTransfer.files);
             }
@@ -99,16 +99,16 @@ const Uploader: FunctionComponent<UploaderProps> = ({onClickUpload, onDropFiles}
         if (e.currentTarget.contains(e.relatedTarget as Node | null)) {
             return;
         }
-        setActived(false);
+        setActive(false);
     }, []);
 
     return (
         <>
             <DropZone
-                actived={actived}
+                active={active}
                 onDrop={onDrop}
                 onDragOver={e => e.preventDefault()}
-                onDragEnter={() => setActived(true)}
+                onDragEnter={() => setActive(true)}
                 onDragLeave={onDragLeave}
             >
                 <Icon type="upload" className="upload-icon" />

diff --git a/frontend/packages/core/src/components/HistogramPage/HistogramChart.tsx b/frontend/packages/core/src/components/HistogramPage/HistogramChart.tsx
@@ -14,6 +14,8 @@
  * limitations under the License.
  */
 
+// cSpell:words npts
+
 import type {EChartOption, ECharts, EChartsConvertFinder} from 'echarts';
 import type {HistogramData, OffsetData, OverlayData, OverlayDataItem} from '~/resource/histogram';
 import LineChart, {LineChartRef} from '~/components/LineChart';

diff --git a/frontend/packages/core/src/components/Input.tsx b/frontend/packages/core/src/components/Input.tsx
@@ -45,14 +45,14 @@ const StyledInput = styled.input<{rounded?: boolean}>`
     }
 `;
 
-type CustomeInputProps = {
+type CustomInputProps = {
     rounded?: boolean;
     value?: string;
     onChange?: (value: string) => unknown;
 };
 
-export type InputProps = Omit<React.ComponentPropsWithoutRef<'input'>, keyof CustomeInputProps | 'type' | 'className'> &
-    CustomeInputProps;
+export type InputProps = Omit<React.ComponentPropsWithoutRef<'input'>, keyof CustomInputProps | 'type' | 'className'> &
+    CustomInputProps;
 
 const Input = React.forwardRef<HTMLInputElement, InputProps & WithStyled>(
     ({rounded, value, onChange, className, ...props}, ref) => (

diff --git a/frontend/packages/core/src/components/SamplePage/ImagePreviewer.tsx b/frontend/packages/core/src/components/SamplePage/ImagePreviewer.tsx
@@ -61,7 +61,7 @@ const Header = styled.div`
             font-size: ${em(10)};
 
             > a {
-                display: inline-blcok;
+                display: inline-block;
                 line-height: 1;
                 height: ${em(14)};
 

diff --git a/frontend/packages/core/src/components/SamplePage/SampleChart.tsx b/frontend/packages/core/src/components/SamplePage/SampleChart.tsx
@@ -301,7 +301,7 @@ const SampleChart: FunctionComponent<SampleChartProps> = ({
         return null;
     }, [viewed, loading, error, data, step, entityProps, t, content]);
 
-    const Previewer = useMemo(() => {
+    const Previewer = useMemo<React.ReactNode>(() => {
         if (!previewer) {
             return null;
         }

diff --git a/frontend/packages/core/src/components/SamplePage/StepSlider.tsx b/frontend/packages/core/src/components/SamplePage/StepSlider.tsx
@@ -47,7 +47,8 @@ const Label = styled.div`
             font-size: ${em(10)};
 
             > a {
-                display: inline-blcok;
+                display: inline-block;
+                cursor: pointer;
                 line-height: 1;
                 height: ${em(14)};
 
@@ -112,10 +113,10 @@ const StepSlider: FunctionComponent<StepSliderProps> = ({onChange, onChangeCompl
                     <div>{`${t('sample:step')}: ${steps[step] ?? '...'}`}</div>
                     <Tippy placement="right" theme="tooltip" content={t('sample:step-tip')}>
                         <div className="step-buttons">
-                            <a href="javascript:void(0)" onClick={prevStep}>
+                            <a onClick={prevStep}>
                                 <Icon type="chevron-up" />
                             </a>
-                            <a href="javascript:void(0)" onClick={nextStep}>
+                            <a onClick={nextStep}>
                                 <Icon type="chevron-down" />
                             </a>
                         </div>

diff --git a/frontend/packages/core/src/components/StackChart.tsx b/frontend/packages/core/src/components/StackChart.tsx
@@ -14,6 +14,8 @@
  * limitations under the License.
  */
 
+// cSpell:words coord zlevel
+
 import * as chart from '~/utils/chart';
 
 import type {EChartOption, ECharts, EChartsConvertFinder} from 'echarts';

diff --git a/frontend/packages/core/src/hooks/useECharts.ts b/frontend/packages/core/src/hooks/useECharts.ts
@@ -14,6 +14,8 @@
  * limitations under the License.
  */
 
+// cSpell:words zlevel
+
 import {MutableRefObject, useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState} from 'react';
 import {position, primaryColor, size} from '~/utils/style';
 

diff --git a/frontend/packages/core/src/pages/graph.tsx b/frontend/packages/core/src/pages/graph.tsx
@@ -115,7 +115,7 @@ const Graph: FunctionComponent = () => {
 
     useEffect(() => {
         if (data?.data.size) {
-            setFiles([new File([data.data], data.filename || 'unknwon_model')]);
+            setFiles([new File([data.data], data.filename || 'unknown_model')]);
         }
     }, [data]);
 
@@ -185,7 +185,7 @@ const Graph: FunctionComponent = () => {
                     <NodePropertiesSidebar
                         data={nodeData}
                         onClose={() => setNodeData(null)}
-                        showNodeDodumentation={() => graph.current?.showNodeDocumentation(nodeData)}
+                        showNodeDocumentation={() => graph.current?.showNodeDocumentation(nodeData)}
                     />
                 </Aside>
             );

diff --git a/frontend/packages/core/src/resource/graph/types.ts b/frontend/packages/core/src/resource/graph/types.ts
@@ -14,6 +14,8 @@
  * limitations under the License.
  */
 
+// cSpell:words strs
+
 export type Property = {
     name?: string;
     value: string;

diff --git a/frontend/packages/core/src/routes/index.ts b/frontend/packages/core/src/routes/index.ts
@@ -1,3 +1,19 @@
+/**
+ * Copyright 2020 Baidu Inc. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
 import React, {FunctionComponent, LazyExoticComponent} from 'react';
 
 export enum Pages {