From 001e414c21ef0f27a2117933ac639ab278f168f3 Mon Sep 17 00:00:00 2001 From: islxyqwe Date: Tue, 8 Aug 2023 11:56:08 +0800 Subject: [PATCH] fix: reduce freq of setVisualConfigs --- .../src/components/limitSetting.tsx | 14 +++--- .../src/components/sizeSetting.tsx | 16 ++++--- packages/graphic-walker/src/hooks/index.ts | 8 ++++ packages/graphic-walker/src/renderer/hooks.ts | 48 +------------------ .../src/store/visualSpecStore.ts | 2 +- .../src/visualSettings/index.tsx | 1 - 6 files changed, 27 insertions(+), 62 deletions(-) diff --git a/packages/graphic-walker/src/components/limitSetting.tsx b/packages/graphic-walker/src/components/limitSetting.tsx index 87f50c8a..5c026dd7 100644 --- a/packages/graphic-walker/src/components/limitSetting.tsx +++ b/packages/graphic-walker/src/components/limitSetting.tsx @@ -1,8 +1,10 @@ import React from 'react'; import { useTranslation } from 'react-i18next'; +import { useDebounceValueBind } from '../hooks'; export default function LimitSetting(props: { value: number; setValue: (v: number) => void }) { const { t } = useTranslation('translation', { keyPrefix: 'main.tabpanel.settings' }); + const [innerValue, setInnerValue] = useDebounceValueBind(props.value, v => props.setValue(v)); return (
@@ -10,15 +12,15 @@ export default function LimitSetting(props: { value: number; setValue: (v: numbe className="w-full h-2 bg-blue-100 appearance-none" type="range" name="limit" - value={props.value > 0 ? props.value : 0} + value={innerValue > 0 ? innerValue : 0} min="1" max="50" - disabled={props.value < 0} + disabled={innerValue < 0} step="1" onChange={(e) => { const v = parseInt(e.target.value); if (!isNaN(v)) { - props.setValue(v); + setInnerValue(v); } }} /> @@ -26,12 +28,12 @@ export default function LimitSetting(props: { value: number; setValue: (v: numbe 0} + checked={innerValue > 0} onChange={(e) => { - props.setValue(e.target.checked ? 30 : -1); + setInnerValue(e.target.checked ? 30 : -1); }} > - {`${t('limit')}${props.value > 0 ? `: ${props.value}` : ''}`} + {`${t('limit')}${innerValue > 0 ? `: ${innerValue}` : ''}`}
); diff --git a/packages/graphic-walker/src/components/sizeSetting.tsx b/packages/graphic-walker/src/components/sizeSetting.tsx index cca6ac2e..bf77fccf 100644 --- a/packages/graphic-walker/src/components/sizeSetting.tsx +++ b/packages/graphic-walker/src/components/sizeSetting.tsx @@ -1,6 +1,7 @@ import { ArrowsPointingOutIcon, XMarkIcon } from "@heroicons/react/24/outline"; import React, { useState, useEffect } from "react"; import { useTranslation } from "react-i18next"; +import { useDebounceValueBind } from "../hooks"; interface SizeSettingProps { onWidthChange: (val: number) => void; @@ -12,7 +13,8 @@ interface SizeSettingProps { export const ResizeDialog: React.FC = (props) => { const { onWidthChange, onHeightChange, width, height, children } = props; const { t } = useTranslation("translation", { keyPrefix: "main.tabpanel.settings.size_setting" }); - + const [innerWidth, setInnerWidth] = useDebounceValueBind(width, onWidthChange); + const [innerHeight, setInnerHeight] = useDebounceValueBind(height, onHeightChange); return (
{children} @@ -22,16 +24,16 @@ export const ResizeDialog: React.FC = (props) => { style={{ cursor: "ew-resize" }} type="range" name="width" - value={Math.sqrt(width / 1000)} + value={Math.sqrt(innerWidth / 1000)} min="0" max="1" step="0.01" onChange={(e) => { - onWidthChange(Math.round(Number(e.target.value) ** 2 * 1000)); + setInnerWidth(Math.round(Number(e.target.value) ** 2 * 1000)); }} /> - {`${t("width")}: ${width}`} + {`${t("width")}: ${innerWidth}`}
@@ -40,16 +42,16 @@ export const ResizeDialog: React.FC = (props) => { style={{ cursor: "ew-resize" }} type="range" name="height" - value={Math.sqrt(height / 1000)} + value={Math.sqrt(innerHeight / 1000)} min="0" max="1" step="0.01" onChange={(e) => { - onHeightChange(Math.round(Number(e.target.value) ** 2 * 1000)); + setInnerHeight(Math.round(Number(e.target.value) ** 2 * 1000)); }} /> - {`${t("height")}: ${height}`} + {`${t("height")}: ${innerHeight}`}
diff --git a/packages/graphic-walker/src/hooks/index.ts b/packages/graphic-walker/src/hooks/index.ts index 2d8846a7..ac5c89ff 100644 --- a/packages/graphic-walker/src/hooks/index.ts +++ b/packages/graphic-walker/src/hooks/index.ts @@ -8,3 +8,11 @@ export function useDebounceValue(value: T, timeout = 200): T { }, [value]); return innerValue; } + +export function useDebounceValueBind(value: T, setter: (v: T) => void, timeout = 200): [T, (v: T) => void] { + const [innerValue, setInnerValue] = useState(value); + const valueToSet = useDebounceValue(innerValue, timeout); + useEffect(() => setInnerValue(value), [value]) + useEffect(() => setter(valueToSet), [valueToSet]); + return [innerValue, setInnerValue]; +} \ No newline at end of file diff --git a/packages/graphic-walker/src/renderer/hooks.ts b/packages/graphic-walker/src/renderer/hooks.ts index 57ca8cf4..7c79f39e 100644 --- a/packages/graphic-walker/src/renderer/hooks.ts +++ b/packages/graphic-walker/src/renderer/hooks.ts @@ -4,9 +4,7 @@ import type { DeepReadonly, IFilterField, IRow, IViewField, IDataQueryWorkflowSt import { useGlobalStore } from '../store'; import { useAppRootContext } from '../components/appRoot'; import { toWorkflow } from '../utils/workflow'; -import { dataQueryClient } from '../computation/clientComputation'; import { dataQueryServer } from '../computation/serverComputation'; -import { useDebounceValue } from '../hooks'; export const useComputationFunc = (): IComputationFunction => { const { vizStore } = useGlobalStore(); @@ -40,14 +38,12 @@ export const useRenderer = (props: UseRendererProps): UseRendererResult => { filters, defaultAggregated, sort, - limit: storeLimit, + limit, computationFunction, } = props; const [computing, setComputing] = useState(false); const taskIdRef = useRef(0); - const limit = useDebounceValue(storeLimit); - const workflow = useMemo(() => { return toWorkflow( filters, @@ -65,48 +61,6 @@ export const useRenderer = (props: UseRendererProps): UseRendererResult => { const appRef = useAppRootContext(); - // useEffect(() => { - // if (computationMode !== 'client') { - // return; - // } - // if (!data) { - // console.warn('useRenderer error: prop `data` is required for "client" mode, but none is found.'); - // return; - // } - // if (!allFields) { - // console.warn('useRenderer error: prop `fields` is required for "client" mode, but none is found.'); - // return; - // } - // const taskId = ++taskIdRef.current; - // appRef.current?.updateRenderStatus('computing'); - // setComputing(true); - // dataQueryClient(data, allFields, workflow).then(data => { - // if (taskId !== taskIdRef.current) { - // return; - // } - // appRef.current?.updateRenderStatus('rendering'); - // unstable_batchedUpdates(() => { - // setComputing(false); - // setViewData(data); - // setParsedWorkflow(workflow); - // }); - // }).catch((err) => { - // if (taskId !== taskIdRef.current) { - // return; - // } - // appRef.current?.updateRenderStatus('error'); - // console.error(err); - // unstable_batchedUpdates(() => { - // setComputing(false); - // setViewData([]); - // setParsedWorkflow([]); - // }); - // }); - // return () => { - // taskIdRef.current++; - // }; - // }, [computationMode, data, allFields, workflow]); - useEffect(() => { const taskId = ++taskIdRef.current; appRef.current?.updateRenderStatus('computing'); diff --git a/packages/graphic-walker/src/store/visualSpecStore.ts b/packages/graphic-walker/src/store/visualSpecStore.ts index 6a31599f..c7ba74b4 100644 --- a/packages/graphic-walker/src/store/visualSpecStore.ts +++ b/packages/graphic-walker/src/store/visualSpecStore.ts @@ -1,4 +1,4 @@ -import { IReactionDisposer, makeAutoObservable, observable, reaction, toJS } from 'mobx'; +import { IReactionDisposer, makeAutoObservable, observable, computed, reaction, toJS } from 'mobx'; import produce from 'immer'; import { DataSet, diff --git a/packages/graphic-walker/src/visualSettings/index.tsx b/packages/graphic-walker/src/visualSettings/index.tsx index f4286757..95c62af4 100644 --- a/packages/graphic-walker/src/visualSettings/index.tsx +++ b/packages/graphic-walker/src/visualSettings/index.tsx @@ -37,7 +37,6 @@ import throttle from '../utils/throttle'; import KanariesLogo from '../assets/kanaries.png'; import { ImageWithFallback } from '../components/timeoutImg'; import LimitSetting from '../components/limitSetting'; -import { runInAction } from 'mobx'; const Invisible = styled.div` clip: rect(1px, 1px, 1px, 1px);