chore: get rid of useHeavyWork (#871)

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<typeof histogram_transform>('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<HistogramChartProps> = ({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<OffsetData | OverlayData>('histogram_transform', params);
 
     const [highlight, setHighlight] = useState<number | null>(null);
     useEffect(() => setHighlight(null), [mode]);

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<typeof scalar_transform>('scalar_transform').then((scalar_transform): typeof transform => params =>
-        scalar_transform(params.datasets, params.smoothing)
-    );
-
-const axisRangeWasm = () =>
-    wasm<typeof scalar_axis_range>('scalar_axis_range').then((scalar_axis_range): typeof axisRange => params =>
-        scalar_axis_range(params.datasets, params.outlier)
-    );
-
-const rangeWasm = () =>
-    wasm<typeof scalar_range>('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<ScalarChartProps> = ({
         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<Dataset[]>('scalar_transform', transformParams);
     const smoothedDatasets = useMemo<NonNullable<typeof smoothedDatasetsOrUndefined>>(
         () => 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<Range>('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<Range[]>('scalar_range', datasetRangesParams);
 
     const ranges: Record<'x' | 'y', Range | undefined> = useMemo(() => {
         let x: Range | undefined = undefined;

frontend/packages/core/src/hooks/useHeavyWork.ts

-/**
- * 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 = <T = unknown, P = unknown>(
-    createWasm: (() => Promise<(arg: P) => T> | null) | null,
-    createWorker: (() => Worker | null) | null,
-    fallback: ((arg: P) => T) | null,
-    params: P
-) => {
-    const wasm = useRef<ReturnType<NonNullable<typeof createWasm>>>(null);
-    const worker = useRef<ReturnType<NonNullable<typeof createWorker>>>(null);
-
-    const [result, setResult] = useState<T | undefined>(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;

frontend/packages/core/src/hooks/useWebAssembly.ts

@@ -22,7 +22,7 @@ import useWorker from '~/hooks/useWorker';
 type FuncNames = Exclude<keyof typeof funcs, 'default'>;
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
-const useWebAssembly = <D, P = any, E extends Error = Error>(name: FuncNames, params: P) => {
+const useWebAssembly = <D, P extends Array<unknown> = any, E extends Error = Error>(name: FuncNames, params: P) => {
     const p = useMemo(() => ({name, params}), [name, params]);
     return useWorker<D, typeof p, E>('wasm', p);
 };

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<D, E extends Error> = {
 };
 
 const useWorker = <D, P = unknown, E extends Error = Error>(name: string, params: P): WorkerResult<D, E> => {
-    const p = useMemo(() => params, [params]);
-
     const [result, setResult] = useState<WorkerResult<D, E>>({});
 
     useEffect(() => {
@@ -37,14 +35,14 @@ const useWorker = <D, P = unknown, E extends Error = Error>(name: string, params
         worker.emit<InitializeData>('INITIALIZE', {env: import.meta.env});
         worker.on('INITIALIZED', () => {
             setResult({worker});
-            worker.emit('RUN', p);
+            worker.emit('RUN', params);
         });
         worker.on<D>('RESULT', data => setResult({data, worker}));
         worker.on<E>('ERROR', error => setResult({error, worker}));
         return () => {
             worker.terminate();
         };
-    }, [name, p]);
+    }, [name, params]);
 
     return result;
 };

frontend/packages/core/src/utils/wasm.ts

-/**
- * 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 <T extends (...args: any[]) => unknown>(name: Exclude<keyof typeof funcs, 'default'>) => {
-    return funcs[name] as T;
-};