minor bugs fix (#851)

* fix: get nearest points listed in tooltip of scalar page by selected x-axis * fix: humanize relative time display in tooltip of scalar chart * fix: fix y axis range error in scalar chart (fix #765)
PaddlePaddle · Nov 23, 2020 · 0e38ff7 · 0e38ff7
1 parent f0de599
commit 0e38ff7
Show file tree

Hide file tree

Showing 29 changed files with 502 additions and 65 deletions.
diff --git a/frontend/packages/core/src/components/Audio.tsx b/frontend/packages/core/src/components/Audio.tsx
@@ -48,7 +48,7 @@ const Container = styled.div`
         cursor: pointer;
         ${transitionProps('color')}
 
-        &.volumn {
+        &.volume {
             font-size: ${rem(20)};
             ${size(rem(20), rem(20))}
         }
@@ -80,7 +80,7 @@ const Container = styled.div`
     }
 `;
 
-const VolumnSlider = styled(Slider)`
+const VolumeSlider = styled(Slider)`
     margin: ${rem(15)} ${rem(18)};
     width: ${rem(4)};
     height: ${rem(100)};
@@ -170,7 +170,7 @@ const Audio: FunctionComponent<AudioProps & WithStyled> = ({
     const [duration, setDuration] = useState('00:00');
     const [decoding, setDecoding] = useState(false);
     const [playing, setPlaying] = useState(false);
-    const [volumn, setVolumn] = useState(100);
+    const [volume, setVolume] = useState(100);
     const [playAfterSeek, setPlayAfterSeek] = useState(false);
 
     const play = useCallback(() => player.current?.play(), []);
@@ -199,7 +199,7 @@ const Audio: FunctionComponent<AudioProps & WithStyled> = ({
     const toggleMute = useCallback(() => {
         if (player.current) {
             player.current.toggleMute();
-            setVolumn(player.current.volumn);
+            setVolume(player.current.volume);
         }
     }, []);
 
@@ -228,9 +228,9 @@ const Audio: FunctionComponent<AudioProps & WithStyled> = ({
 
     useEffect(() => {
         if (player.current) {
-            player.current.volumn = volumn;
+            player.current.volume = volume;
         }
-    }, [volumn]);
+    }, [volume]);
 
     useEffect(() => {
         let p: AudioPlayer | null = null;
@@ -269,15 +269,15 @@ const Audio: FunctionComponent<AudioProps & WithStyled> = ({
         };
     }, [data, startTimer, stopTimer, onLoading, onLoad, audioContext]);
 
-    const volumnIcon = useMemo(() => {
-        if (volumn === 0) {
+    const volumeIcon = useMemo(() => {
+        if (volume === 0) {
             return 'mute';
         }
-        if (volumn <= 50) {
-            return 'volumn-low';
+        if (volume <= 50) {
+            return 'volume-low';
         }
-        return 'volumn';
-    }, [volumn]);
+        return 'volume';
+    }, [volume]);
 
     if (loading) {
         return <SyncLoader color={primaryColor} size="15px" />;
@@ -313,18 +313,18 @@ const Audio: FunctionComponent<AudioProps & WithStyled> = ({
                 interactive
                 hideOnClick={false}
                 content={
-                    <VolumnSlider
-                        value={volumn}
+                    <VolumeSlider
+                        value={volume}
                         min={0}
                         max={100}
                         step={1}
-                        onChange={setVolumn}
+                        onChange={setVolume}
                         orientation="vertical"
                     />
                 }
             >
-                <a className="control volumn" onClick={toggleMute}>
-                    <Icon type={volumnIcon} />
+                <a className="control volume" onClick={toggleMute}>
+                    <Icon type={volumeIcon} />
                 </a>
             </Tippy>
         </Container>

diff --git a/frontend/packages/core/src/components/ScalarPage/ScalarChart.tsx b/frontend/packages/core/src/components/ScalarPage/ScalarChart.tsx
@@ -201,7 +201,8 @@ const ScalarChart: FunctionComponent<ScalarChartProps> = ({
     const formatter = useCallback(
         (params: EChartOption.Tooltip.Format | EChartOption.Tooltip.Format[]) => {
             const series: Dataset[number] = Array.isArray(params) ? params[0].data : params.data;
-            const points = nearestPoint(smoothedDatasets ?? [], runs, series[1]).map((point, index) => ({
+            const idx = xAxisMap[xAxis];
+            const points = nearestPoint(smoothedDatasets ?? [], runs, idx, series[idx]).map((point, index) => ({
                 ...point,
                 ...datasetRanges?.[index]
             }));
@@ -212,7 +213,7 @@ const ScalarChart: FunctionComponent<ScalarChartProps> = ({
                 <TooltipTable run={t('common:runs')} runs={sorted.map(i => i.run)} columns={columns} data={data} />
             );
         },
-        [smoothedDatasets, datasetRanges, runs, sortingMethod, maxStepLength, t, i18n]
+        [smoothedDatasets, datasetRanges, runs, sortingMethod, xAxis, maxStepLength, t, i18n]
     );
 
     const options = useMemo(

diff --git a/frontend/packages/core/src/resource/graph/types.ts b/frontend/packages/core/src/resource/graph/types.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.
+ */
+
 export type Property = {
     name?: string;
     value: string;

diff --git a/frontend/packages/core/src/resource/high-dimensional/index.ts b/frontend/packages/core/src/resource/high-dimensional/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 type {Point} from './types';
 
 export type {Dimension, Reduction, Point} from './types';

diff --git a/frontend/packages/core/src/resource/high-dimensional/types.ts b/frontend/packages/core/src/resource/high-dimensional/types.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.
+ */
+
 export type Dimension = '2d' | '3d';
 export type Reduction = 'pca' | 'tsne';
 

diff --git a/frontend/packages/core/src/resource/histogram/chart.ts b/frontend/packages/core/src/resource/histogram/chart.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 type {EChartOption, VisualMap} from 'echarts';
 
 import type {Modes} from './types';

diff --git a/frontend/packages/core/src/resource/histogram/data.ts b/frontend/packages/core/src/resource/histogram/data.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 type {HistogramData, OffsetData, OffsetDataItem, OverlayData, OverlayDataItem} from './types';
 
 import {Modes} from './types';

diff --git a/frontend/packages/core/src/resource/histogram/index.ts b/frontend/packages/core/src/resource/histogram/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 {Modes} from './types';
 
 export const modes = [Modes.Offset, Modes.Overlay] as const;

diff --git a/frontend/packages/core/src/resource/histogram/types.ts b/frontend/packages/core/src/resource/histogram/types.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.
+ */
+
 export enum Modes {
     Offset = 'offset',
     Overlay = 'overlay'

diff --git a/frontend/packages/core/src/resource/pr-curve/chart.ts b/frontend/packages/core/src/resource/pr-curve/chart.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.
+ */
+
 export const options = {
     legend: {
         data: []

diff --git a/frontend/packages/core/src/resource/pr-curve/data.ts b/frontend/packages/core/src/resource/pr-curve/data.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.
+ */
+
 export const nearestPoint = (data: number[][][], recall: number): number[][][] => {
     return data.map(series => {
         let delta = Number.POSITIVE_INFINITY;

diff --git a/frontend/packages/core/src/resource/pr-curve/index.ts b/frontend/packages/core/src/resource/pr-curve/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.
+ */
+
 export type {PRCurveData, Run, StepInfo, Tag} from './types';
 export {TimeType} from './types';
 export * from './chart';

diff --git a/frontend/packages/core/src/resource/pr-curve/types.ts b/frontend/packages/core/src/resource/pr-curve/types.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 {Run as BaseRun, Tag as BaseTag, TimeMode} from '~/types';
 
 export {TimeMode as TimeType};