From 81240db75f1c3d784edad525101fb803285d95ee Mon Sep 17 00:00:00 2001 From: Peter Pan Date: Thu, 17 Dec 2020 20:42:27 +0800 Subject: [PATCH] chore: get rid of useHeavyWork (#871) --- .../HistogramPage/HistogramChart.tsx | 22 ++---- .../src/components/ScalarPage/ScalarChart.tsx | 49 ++------------ .../packages/core/src/hooks/useHeavyWork.ts | 67 ------------------- .../packages/core/src/hooks/useWebAssembly.ts | 2 +- frontend/packages/core/src/hooks/useWorker.ts | 8 +-- frontend/packages/core/src/utils/wasm.ts | 22 ------ 6 files changed, 15 insertions(+), 155 deletions(-) delete mode 100644 frontend/packages/core/src/hooks/useHeavyWork.ts delete mode 100644 frontend/packages/core/src/utils/wasm.ts diff --git a/frontend/packages/core/src/components/HistogramPage/HistogramChart.tsx b/frontend/packages/core/src/components/HistogramPage/HistogramChart.tsx index 59eeaef3..b6370002 100644 --- a/frontend/packages/core/src/components/HistogramPage/HistogramChart.tsx +++ b/frontend/packages/core/src/components/HistogramPage/HistogramChart.tsx @@ -19,7 +19,7 @@ import type {EChartOption, ECharts, EChartsConvertFinder} from 'echarts'; import type {HistogramData, OffsetData, OverlayData, OverlayDataItem} from '~/resource/histogram'; import LineChart, {LineChartRef} from '~/components/LineChart'; -import {Modes, options as chartOptions, transform} from '~/resource/histogram'; +import {Modes, options as chartOptions} from '~/resource/histogram'; import React, {FunctionComponent, useCallback, useEffect, useMemo, useRef, useState} from 'react'; import StackChart, {StackChartProps, StackChartRef} from '~/components/StackChart'; import {rem, size} from '~/utils/style'; @@ -30,25 +30,17 @@ import {distance} from '~/utils'; import ee from '~/utils/event'; import {fetcher} from '~/utils/fetch'; import {format} from 'd3-format'; -import type {histogram_transform} from '@visualdl/wasm'; // eslint-disable-line @typescript-eslint/no-unused-vars import minBy from 'lodash/minBy'; import queryString from 'query-string'; import styled from 'styled-components'; -import useHeavyWork from '~/hooks/useHeavyWork'; import {useRunningRequest} from '~/hooks/useRequest'; import useThrottleFn from '~/hooks/useThrottleFn'; import {useTranslation} from 'react-i18next'; -import wasm from '~/utils/wasm'; +import useWebAssembly from '~/hooks/useWebAssembly'; const formatTooltipXValue = format('.4f'); const formatTooltipYValue = format('.4'); -const transformWasm = () => - wasm('histogram_transform').then((histogram_transform): typeof transform => params => - histogram_transform(params.data, params.mode) - ); -// const transformWorker = () => new Worker('~/worker/histogram/transform.worker.ts', {type: 'module'}); - const Wrapper = styled.div` ${size('100%', '100%')} display: flex; @@ -108,14 +100,8 @@ const HistogramChart: FunctionComponent = ({cid, run, tag, const title = useMemo(() => `${tag} (${run.label})`, [tag, run.label]); - const params = useMemo( - () => ({ - data: dataset ?? [], - mode - }), - [dataset, mode] - ); - const data = useHeavyWork(transformWasm, null, transform, params); + const params = useMemo(() => [dataset ?? [], mode], [dataset, mode]); + const {data} = useWebAssembly('histogram_transform', params); const [highlight, setHighlight] = useState(null); useEffect(() => setHighlight(null), [mode]); diff --git a/frontend/packages/core/src/components/ScalarPage/ScalarChart.tsx b/frontend/packages/core/src/components/ScalarPage/ScalarChart.tsx index 0bd52097..4c3e7d2c 100644 --- a/frontend/packages/core/src/components/ScalarPage/ScalarChart.tsx +++ b/frontend/packages/core/src/components/ScalarPage/ScalarChart.tsx @@ -20,19 +20,15 @@ import React, {FunctionComponent, useCallback, useMemo, useRef, useState} from ' import { SortingMethod, XAxis, - axisRange, chartData, options as chartOptions, nearestPoint, - range, singlePointRange, sortingMethodMap, tooltip, - transform, xAxisMap } from '~/resource/scalar'; import {rem, size} from '~/utils/style'; -import type {scalar_axis_range, scalar_range, scalar_transform} from '@visualdl/wasm'; // eslint-disable-line @typescript-eslint/no-unused-vars import ChartToolbox from '~/components/ChartToolbox'; import type {EChartOption} from 'echarts'; @@ -44,31 +40,12 @@ import {format} from 'd3-format'; import queryString from 'query-string'; import {renderToStaticMarkup} from 'react-dom/server'; import styled from 'styled-components'; -import useHeavyWork from '~/hooks/useHeavyWork'; import {useRunningRequest} from '~/hooks/useRequest'; import {useTranslation} from 'react-i18next'; -import wasm from '~/utils/wasm'; +import useWebAssembly from '~/hooks/useWebAssembly'; const labelFormatter = format('.8'); -const smoothWasm = () => - wasm('scalar_transform').then((scalar_transform): typeof transform => params => - scalar_transform(params.datasets, params.smoothing) - ); - -const axisRangeWasm = () => - wasm('scalar_axis_range').then((scalar_axis_range): typeof axisRange => params => - scalar_axis_range(params.datasets, params.outlier) - ); - -const rangeWasm = () => - wasm('scalar_range').then((scalar_range): typeof range => params => - scalar_range(params.datasets) - ); - -// const smoothWorker = () => new Worker('~/worker/scalar/smooth.worker.ts', {type: 'module'}); -// const rangeWorker = () => new Worker('~/worker/scalar/range.worker.ts', {type: 'module'}); - const Wrapper = styled.div` ${size('100%', '100%')} display: flex; @@ -142,30 +119,18 @@ const ScalarChart: FunctionComponent = ({ setYAxisType(t => (t === YAxisType.log ? YAxisType.value : YAxisType.log)); }, [setYAxisType]); - const transformParams = useMemo( - () => ({ - datasets: datasets?.map(data => data ?? []) ?? [], - smoothing - }), - [datasets, smoothing] - ); - const smoothedDatasetsOrUndefined = useHeavyWork(smoothWasm, null, transform, transformParams); + const transformParams = useMemo(() => [datasets?.map(data => data ?? []) ?? [], smoothing], [datasets, smoothing]); + const {data: smoothedDatasetsOrUndefined} = useWebAssembly('scalar_transform', transformParams); const smoothedDatasets = useMemo>( () => smoothedDatasetsOrUndefined ?? [], [smoothedDatasetsOrUndefined] ); - const axisRangeParams = useMemo( - () => ({ - datasets: smoothedDatasets, - outlier: !!outlier - }), - [smoothedDatasets, outlier] - ); - const yRange = useHeavyWork(axisRangeWasm, null, axisRange, axisRangeParams); + const axisRangeParams = useMemo(() => [smoothedDatasets, !!outlier], [smoothedDatasets, outlier]); + const {data: yRange} = useWebAssembly('scalar_axis_range', axisRangeParams); - const datasetRangesParams = useMemo(() => ({datasets: smoothedDatasets}), [smoothedDatasets]); - const datasetRanges = useHeavyWork(rangeWasm, null, range, datasetRangesParams); + const datasetRangesParams = useMemo(() => [smoothedDatasets], [smoothedDatasets]); + const {data: datasetRanges} = useWebAssembly('scalar_range', datasetRangesParams); const ranges: Record<'x' | 'y', Range | undefined> = useMemo(() => { let x: Range | undefined = undefined; diff --git a/frontend/packages/core/src/hooks/useHeavyWork.ts b/frontend/packages/core/src/hooks/useHeavyWork.ts deleted file mode 100644 index b7d9cdf8..00000000 --- a/frontend/packages/core/src/hooks/useHeavyWork.ts +++ /dev/null @@ -1,67 +0,0 @@ -/** - * 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 {useCallback, useEffect, useRef, useState} from 'react'; - -const useHeavyWork = ( - createWasm: (() => Promise<(arg: P) => T> | null) | null, - createWorker: (() => Worker | null) | null, - fallback: ((arg: P) => T) | null, - params: P -) => { - const wasm = useRef>>(null); - const worker = useRef>>(null); - - const [result, setResult] = useState(undefined); - - const runFallback = useCallback((p: P) => fallback && setResult(fallback(p)), [fallback]); - - useEffect(() => { - try { - if (createWasm && typeof WebAssembly !== 'undefined') { - if (!wasm.current) { - wasm.current = createWasm(); - } - wasm.current?.then((work: (arg: P) => T) => setResult(work(params))).catch(() => runFallback(params)); - return; - } - - if (createWorker && typeof Worker !== 'undefined') { - if (!worker.current) { - worker.current = createWorker(); - } - worker.current?.postMessage(params); - worker.current?.addEventListener('message', ({data}: MessageEvent & {data: T}) => setResult(data)); - worker.current?.addEventListener('error', () => runFallback(params)); - return; - } - } catch (e) { - if (import.meta.env.MODE === 'development') { - // eslint-disable-next-line no-console - console.error('Error during heavy work, trying to use fallback'); - // eslint-disable-next-line no-console - console.error(e); - } - runFallback(params); - } - - runFallback(params); - }, [createWasm, createWorker, runFallback, params]); - - return result; -}; - -export default useHeavyWork; diff --git a/frontend/packages/core/src/hooks/useWebAssembly.ts b/frontend/packages/core/src/hooks/useWebAssembly.ts index 9fdd7a0b..1deb0044 100644 --- a/frontend/packages/core/src/hooks/useWebAssembly.ts +++ b/frontend/packages/core/src/hooks/useWebAssembly.ts @@ -22,7 +22,7 @@ import useWorker from '~/hooks/useWorker'; type FuncNames = Exclude; // eslint-disable-next-line @typescript-eslint/no-explicit-any -const useWebAssembly = (name: FuncNames, params: P) => { +const useWebAssembly = = any, E extends Error = Error>(name: FuncNames, params: P) => { const p = useMemo(() => ({name, params}), [name, params]); return useWorker('wasm', p); }; diff --git a/frontend/packages/core/src/hooks/useWorker.ts b/frontend/packages/core/src/hooks/useWorker.ts index f674646b..a5655ca3 100644 --- a/frontend/packages/core/src/hooks/useWorker.ts +++ b/frontend/packages/core/src/hooks/useWorker.ts @@ -14,7 +14,7 @@ * limitations under the License. */ -import {useEffect, useMemo, useState} from 'react'; +import {useEffect, useState} from 'react'; import type {InitializeData} from '~/worker'; import {WebWorker} from '~/worker'; @@ -28,8 +28,6 @@ type WorkerResult = { }; const useWorker = (name: string, params: P): WorkerResult => { - const p = useMemo(() => params, [params]); - const [result, setResult] = useState>({}); useEffect(() => { @@ -37,14 +35,14 @@ const useWorker = (name: string, params worker.emit('INITIALIZE', {env: import.meta.env}); worker.on('INITIALIZED', () => { setResult({worker}); - worker.emit('RUN', p); + worker.emit('RUN', params); }); worker.on('RESULT', data => setResult({data, worker})); worker.on('ERROR', error => setResult({error, worker})); return () => { worker.terminate(); }; - }, [name, p]); + }, [name, params]); return result; }; diff --git a/frontend/packages/core/src/utils/wasm.ts b/frontend/packages/core/src/utils/wasm.ts deleted file mode 100644 index 313de1d6..00000000 --- a/frontend/packages/core/src/utils/wasm.ts +++ /dev/null @@ -1,22 +0,0 @@ -/** - * 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 -export default async unknown>(name: Exclude) => { - return funcs[name] as T; -}; -- GitLab