From 893862188303b14c141ed37db9ec701ccf30ae16 Mon Sep 17 00:00:00 2001 From: Peter Pan Date: Mon, 23 Nov 2020 16:11:42 +0800 Subject: [PATCH 1/3] fix: get nearest points listed in tooltip of scalar page by selected x-axis --- .../packages/core/src/components/Audio.tsx | 34 +++++------ .../src/components/ScalarPage/ScalarChart.tsx | 5 +- .../packages/core/src/resource/graph/types.ts | 16 ++++++ .../src/resource/high-dimensional/index.ts | 16 ++++++ .../src/resource/high-dimensional/types.ts | 16 ++++++ .../core/src/resource/histogram/chart.ts | 16 ++++++ .../core/src/resource/histogram/data.ts | 16 ++++++ .../core/src/resource/histogram/index.ts | 16 ++++++ .../core/src/resource/histogram/types.ts | 16 ++++++ .../core/src/resource/pr-curve/chart.ts | 16 ++++++ .../core/src/resource/pr-curve/data.ts | 16 ++++++ .../core/src/resource/pr-curve/index.ts | 16 ++++++ .../core/src/resource/pr-curve/types.ts | 16 ++++++ .../core/src/resource/scalar/chart.ts | 20 ++++++- .../packages/core/src/resource/scalar/data.ts | 57 +++++++++++-------- .../core/src/resource/scalar/index.ts | 18 +++++- .../core/src/resource/scalar/types.ts | 16 ++++++ frontend/packages/core/src/types/index.ts | 16 ++++++ frontend/packages/core/src/utils/audio.ts | 36 ++++++++---- frontend/packages/core/src/utils/chart.ts | 16 ++++++ frontend/packages/core/src/utils/event.ts | 16 ++++++ frontend/packages/core/src/utils/fetch.ts | 16 ++++++ frontend/packages/core/src/utils/i18n.ts | 16 ++++++ frontend/packages/core/src/utils/image.ts | 16 ++++++ frontend/packages/core/src/utils/index.ts | 18 ++++++ frontend/packages/core/src/utils/style.ts | 18 ++++++ frontend/packages/core/src/utils/theme.ts | 16 ++++++ frontend/packages/core/src/utils/wasm.ts | 16 ++++++ 28 files changed, 471 insertions(+), 55 deletions(-) diff --git a/frontend/packages/core/src/components/Audio.tsx b/frontend/packages/core/src/components/Audio.tsx index 4ced34846..cb681d22b 100644 --- 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 = ({ 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 = ({ const toggleMute = useCallback(() => { if (player.current) { player.current.toggleMute(); - setVolumn(player.current.volumn); + setVolume(player.current.volume); } }, []); @@ -228,9 +228,9 @@ const Audio: FunctionComponent = ({ 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 = ({ }; }, [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 ; @@ -313,18 +313,18 @@ const Audio: FunctionComponent = ({ interactive hideOnClick={false} content={ - } > - - + + diff --git a/frontend/packages/core/src/components/ScalarPage/ScalarChart.tsx b/frontend/packages/core/src/components/ScalarPage/ScalarChart.tsx index 118c49c77..0bd520974 100644 --- 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 = ({ 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 = ({ 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 index 7753403b1..fd9bfaee3 100644 --- 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 index 82bd774d8..47b3e75f9 100644 --- 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 index 94d50ad78..9997d39a6 100644 --- 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 index a5ac04d75..870c35cd0 100644 --- 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 index 892cf707e..228904c79 100644 --- 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 index 1b6ef986e..8d189220e 100644 --- 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 index 9d2b22afb..5f3c224fc 100644 --- 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 index 1c9102036..17935d16e 100644 --- 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 index 04ad797d0..2bc37f926 100644 --- 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 index 0491f1aa4..5443bd336 100644 --- 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 index 373f73418..5926c362f 100644 --- 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}; diff --git a/frontend/packages/core/src/resource/scalar/chart.ts b/frontend/packages/core/src/resource/scalar/chart.ts index 2a83499c6..48893353e 100644 --- a/frontend/packages/core/src/resource/scalar/chart.ts +++ b/frontend/packages/core/src/resource/scalar/chart.ts @@ -1,3 +1,21 @@ +/** + * 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. + */ + +// cSpell:words maxs coord + import type {Dataset, Range, TooltipData, XAxis} from './types'; import type I18n from 'i18next'; @@ -35,7 +53,7 @@ export const chartData = ({ // smoothed data: // [0] wall time // [1] step - // [2] orginal value + // [2] original value // [3] smoothed value // [4] relative const name = runs[i].label; diff --git a/frontend/packages/core/src/resource/scalar/data.ts b/frontend/packages/core/src/resource/scalar/data.ts index fe47c3767..0a9084cfe 100644 --- a/frontend/packages/core/src/resource/scalar/data.ts +++ b/frontend/packages/core/src/resource/scalar/data.ts @@ -1,3 +1,21 @@ +/** + * 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. + */ + +// cSpell:words quantile accum debias exponentiated + import type {Dataset, ScalarDataset} from './types'; import BigNumber from 'bignumber.js'; @@ -70,7 +88,7 @@ export const axisRange = ({datasets, outlier}: {datasets: Dataset[]; outlier: bo } const values = dataset.map(v => v[2]); if (!outlier) { - // Get the orgin data range. + // Get the origin data range. return { min: Math.min(...values) ?? 0, max: Math.max(...values) ?? 0 @@ -97,32 +115,23 @@ export const axisRange = ({datasets, outlier}: {datasets: Dataset[]; outlier: bo } }; -export const nearestPoint = (data: Dataset[], runs: Run[], step: number) => - data.map((series, index) => { - let nearestItem; - if (step === 0) { - nearestItem = series[0]; - } else { - for (let i = 0; i < series.length; i++) { - const item = series[i]; - if (item[1] === step) { - nearestItem = item; - break; - } - if (item[1] > step) { - nearestItem = series[i - 1 >= 0 ? i - 1 : 0]; - break; - } - if (!nearestItem) { - nearestItem = series[series.length - 1]; - } +export const nearestPoint = (data: Dataset[], runs: Run[], idx: number, value: number) => { + const result: {run: Run; item: Dataset[number]}[] = []; + data.forEach((series, index) => { + const run = runs[index]; + let d = Number.POSITIVE_INFINITY; + let dv = value; + for (let i = 0; i < series.length; i++) { + const dd = Math.abs(series[i][idx] - value); + if (d > dd) { + d = dd; + dv = series[i][idx]; } } - return { - run: runs[index], - item: nearestItem || [0, 0, 0, 0, 0] - }; + result.push(...series.filter(s => s[idx] === dv).map(item => ({run, item}))); }); + return result; +}; export const parseSmoothing = (value: unknown) => { const parsedValue = Number.parseFloat(String(value)); diff --git a/frontend/packages/core/src/resource/scalar/index.ts b/frontend/packages/core/src/resource/scalar/index.ts index 7a98dd050..2bebdba5b 100644 --- a/frontend/packages/core/src/resource/scalar/index.ts +++ b/frontend/packages/core/src/resource/scalar/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 {SortingMethod as SM, XAxis} from './types'; import type {TooltipData} from './types'; @@ -14,7 +30,7 @@ export const sortingMethodMap: Record points, [SM.Descending]: (points: TooltipData[]) => sortBy(points, point => point.item[3]).reverse(), [SM.Ascending]: (points: TooltipData[]) => sortBy(points, point => point.item[3]), - // Compare other ponts width the trigger point, caculate the nearest sort. + // Compare other points width the trigger point, calculate the nearest sort. [SM.Nearest]: (points: TooltipData[], data: number[]) => sortBy(points, point => point.item[3] - data[2]) } as const; diff --git a/frontend/packages/core/src/resource/scalar/types.ts b/frontend/packages/core/src/resource/scalar/types.ts index 05f61dcd0..429509f6f 100644 --- a/frontend/packages/core/src/resource/scalar/types.ts +++ b/frontend/packages/core/src/resource/scalar/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, TimeMode} from '~/types'; type Value = number; diff --git a/frontend/packages/core/src/types/index.ts b/frontend/packages/core/src/types/index.ts index 75ce5880b..5d4cef8d8 100644 --- a/frontend/packages/core/src/types/index.ts +++ b/frontend/packages/core/src/types/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 interface TagsData { runs: string[]; tags: string[][]; diff --git a/frontend/packages/core/src/utils/audio.ts b/frontend/packages/core/src/utils/audio.ts index 919ec3793..259b2dae0 100644 --- a/frontend/packages/core/src/utils/audio.ts +++ b/frontend/packages/core/src/utils/audio.ts @@ -1,6 +1,22 @@ +/** + * 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. + */ + interface AudioPlayerOptions { context?: AudioContext; - volumn?: number; + volume?: number; onplay?: () => void; onstop?: () => void; } @@ -17,7 +33,7 @@ export class AudioPlayer { private stopAt = 0; private offset = 0; - private toggleVolumn = 100; + private toggleVolume = 100; public playing = false; @@ -44,10 +60,10 @@ export class AudioPlayer { return this.decodedSampleRate; } - get volumn() { + get volume() { return this.gain.gain.value * 100; } - set volumn(value: number) { + set volume(value: number) { if (value > 100) { value = 100; } else if (value < 0) { @@ -59,7 +75,7 @@ export class AudioPlayer { constructor(options?: AudioPlayerOptions) { this.options = { context: options?.context ?? new AudioContext(), - volumn: 100, + volume: 100, onplay: () => void 0, onstop: () => void 0, ...options @@ -67,7 +83,7 @@ export class AudioPlayer { this.contextFromOptions = !!options?.context; this.context = this.options.context; this.gain = this.context.createGain(); - this.volumn = this.options.volumn; + this.volume = this.options.volume; } private reset() { @@ -208,11 +224,11 @@ export class AudioPlayer { } toggleMute() { - if (this.volumn === 0) { - this.volumn = this.toggleVolumn || 100; + if (this.volume === 0) { + this.volume = this.toggleVolume || 100; } else { - this.toggleVolumn = this.volumn; - this.volumn = 0; + this.toggleVolume = this.volume; + this.volume = 0; } } diff --git a/frontend/packages/core/src/utils/chart.ts b/frontend/packages/core/src/utils/chart.ts index bea31251d..33b9e8bb7 100644 --- a/frontend/packages/core/src/utils/chart.ts +++ b/frontend/packages/core/src/utils/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 {colors} from '~/utils/theme'; import {format} from 'd3-format'; diff --git a/frontend/packages/core/src/utils/event.ts b/frontend/packages/core/src/utils/event.ts index 227709375..edb701040 100644 --- a/frontend/packages/core/src/utils/event.ts +++ b/frontend/packages/core/src/utils/event.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 EventEmitter from 'eventemitter3'; export default new EventEmitter(); diff --git a/frontend/packages/core/src/utils/fetch.ts b/frontend/packages/core/src/utils/fetch.ts index b48b684a4..979bb18a5 100644 --- a/frontend/packages/core/src/utils/fetch.ts +++ b/frontend/packages/core/src/utils/fetch.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 {TFunction} from 'i18next'; import i18next from 'i18next'; import queryString from 'query-string'; diff --git a/frontend/packages/core/src/utils/i18n.ts b/frontend/packages/core/src/utils/i18n.ts index c7d22c4b9..eaf991db3 100644 --- a/frontend/packages/core/src/utils/i18n.ts +++ b/frontend/packages/core/src/utils/i18n.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 Fetch from 'i18next-fetch-backend'; import LanguageDetector from 'i18next-browser-languagedetector'; import i18n from 'i18next'; diff --git a/frontend/packages/core/src/utils/image.ts b/frontend/packages/core/src/utils/image.ts index 7fb11e5df..e93d9811a 100644 --- a/frontend/packages/core/src/utils/image.ts +++ b/frontend/packages/core/src/utils/image.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 function dataURL2Blob(base64: string): Blob { const parts = base64.split(';base64,'); const contentType = parts[0].split(':')[1]; diff --git a/frontend/packages/core/src/utils/index.ts b/frontend/packages/core/src/utils/index.ts index 259931333..22a54799f 100644 --- a/frontend/packages/core/src/utils/index.ts +++ b/frontend/packages/core/src/utils/index.ts @@ -1,3 +1,21 @@ +/** + * 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. + */ + +// cSpell:words quantile + import BigNumber from 'bignumber.js'; import moment from 'moment'; diff --git a/frontend/packages/core/src/utils/style.ts b/frontend/packages/core/src/utils/style.ts index ee3219075..69f280766 100644 --- a/frontend/packages/core/src/utils/style.ts +++ b/frontend/packages/core/src/utils/style.ts @@ -1,3 +1,21 @@ +/** + * 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. + */ + +// cSpell:words pxval mixins grayscale + import 'tippy.js/dist/tippy.css'; import 'tippy.js/animations/shift-away-subtle.css'; import 'react-toastify/dist/ReactToastify.css'; diff --git a/frontend/packages/core/src/utils/theme.ts b/frontend/packages/core/src/utils/theme.ts index 26c3ae701..bbd55762a 100644 --- a/frontend/packages/core/src/utils/theme.ts +++ b/frontend/packages/core/src/utils/theme.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 {darken, lighten} from 'polished'; import {css} from 'styled-components'; diff --git a/frontend/packages/core/src/utils/wasm.ts b/frontend/packages/core/src/utils/wasm.ts index 6647d980b..313de1d60 100644 --- a/frontend/packages/core/src/utils/wasm.ts +++ b/frontend/packages/core/src/utils/wasm.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 * as funcs from '@visualdl/wasm'; // eslint-disable-next-line @typescript-eslint/no-explicit-any From 4d3e1a849d68f0f9bff5322c5cf0bee9c5cf53e8 Mon Sep 17 00:00:00 2001 From: Peter Pan Date: Mon, 23 Nov 2020 16:32:35 +0800 Subject: [PATCH 2/3] fix: humanize relative time display in tooltip of scalar chart --- .../core/src/resource/scalar/chart.ts | 23 ++++++++++++++++++- 1 file changed, 22 insertions(+), 1 deletion(-) diff --git a/frontend/packages/core/src/resource/scalar/chart.ts b/frontend/packages/core/src/resource/scalar/chart.ts index 48893353e..a4ecb5228 100644 --- a/frontend/packages/core/src/resource/scalar/chart.ts +++ b/frontend/packages/core/src/resource/scalar/chart.ts @@ -22,10 +22,31 @@ import type I18n from 'i18next'; import type {Run} from '~/types'; import {format} from 'd3-format'; import {formatTime} from '~/utils'; +import moment from 'moment'; import {xAxisMap} from './index'; const valueFormatter = format('.5'); +const humanizeDuration = (ms: number) => { + const time = moment.duration(ms); + const hour = time.hours(); + if (hour) { + time.subtract(hour, 'hour'); + } + const minute = time.minutes(); + if (minute) { + time.subtract(minute, 'minute'); + } + const second = time.asSeconds(); + let str = Math.floor(second) + 's'; + if (hour) { + str = `${hour}h${minute}m${str}`; + } else if (minute) { + str = `${minute}m${str}`; + } + return str; +}; + export const options = { legend: { data: [] @@ -162,7 +183,7 @@ export const tooltip = (data: TooltipData[], stepLength: number, i18n: typeof I1 valueFormatter(min ?? Number.NaN), valueFormatter(max ?? Number.NaN), formatTime(item[0], i18n.language), - Math.floor(item[4] * 60 * 60) + 's' + humanizeDuration(item[4] * 60 * 60 * 1000) ]) }; }; From 12d8a5db99d30b14db125454130a100987415e7c Mon Sep 17 00:00:00 2001 From: Peter Pan Date: Mon, 23 Nov 2020 17:15:24 +0800 Subject: [PATCH 3/3] fix: fix y axis range error in scalar chart (fix #765) --- frontend/packages/core/src/resource/scalar/chart.ts | 2 +- frontend/packages/core/src/resource/scalar/data.ts | 8 ++++---- frontend/packages/wasm/src/scalar.rs | 10 +++++----- 3 files changed, 10 insertions(+), 10 deletions(-) diff --git a/frontend/packages/core/src/resource/scalar/chart.ts b/frontend/packages/core/src/resource/scalar/chart.ts index a4ecb5228..5ea581092 100644 --- a/frontend/packages/core/src/resource/scalar/chart.ts +++ b/frontend/packages/core/src/resource/scalar/chart.ts @@ -183,7 +183,7 @@ export const tooltip = (data: TooltipData[], stepLength: number, i18n: typeof I1 valueFormatter(min ?? Number.NaN), valueFormatter(max ?? Number.NaN), formatTime(item[0], i18n.language), - humanizeDuration(item[4] * 60 * 60 * 1000) + humanizeDuration(item[4]) ]) }; }; diff --git a/frontend/packages/core/src/resource/scalar/data.ts b/frontend/packages/core/src/resource/scalar/data.ts index 0a9084cfe..8c61a9fd7 100644 --- a/frontend/packages/core/src/resource/scalar/data.ts +++ b/frontend/packages/core/src/resource/scalar/data.ts @@ -39,8 +39,8 @@ export const transform = ({datasets, smoothing}: {datasets: ScalarDataset[]; smo if (i === 0) { startValue = millisecond; } - // relative time, millisecond to hours. - d[4] = Math.floor(millisecond - startValue) / (60 * 60 * 1000); + // relative time in millisecond. + d[4] = Math.floor(millisecond - startValue); if (!nextVal.isFinite()) { d[3] = nextVal.toNumber(); } else { @@ -83,8 +83,8 @@ export const range = ({datasets}: {datasets: Dataset[]}) => { export const axisRange = ({datasets, outlier}: {datasets: Dataset[]; outlier: boolean}) => { const ranges = compact( datasets?.map(dataset => { - if (dataset.length == 0) { - return; + if (dataset.length === 0) { + return void 0; } const values = dataset.map(v => v[2]); if (!outlier) { diff --git a/frontend/packages/wasm/src/scalar.rs b/frontend/packages/wasm/src/scalar.rs index 8d2027c12..7c7358258 100644 --- a/frontend/packages/wasm/src/scalar.rs +++ b/frontend/packages/wasm/src/scalar.rs @@ -2,7 +2,7 @@ pub struct Dataset(f64, i64, f64); #[derive(Serialize, Deserialize)] -pub struct Smoothed(i64, i64, f64, f64, f64); +pub struct Smoothed(i64, i64, f64, f64, i64); #[derive(Serialize, Deserialize)] pub struct Range { @@ -44,7 +44,7 @@ pub fn transform(datasets: &Vec>, smoothing: f64) -> Vec>, smoothing: f64) -> Vec>, outlier: bool) -> Range { if ranges.len() != 0 { min = ranges .iter() - .min_by(|x, y| x.min.partial_cmp(&y.max).unwrap()) + .min_by(|x, y| x.min.partial_cmp(&y.min).unwrap()) .unwrap() .min; max = ranges