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));
}}
/>
@@ -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));
}}
/>
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);