diff --git a/apps/web/src/components/v2Editor/customBlocks/dropdownInput/dropdownSettings.tsx b/apps/web/src/components/v2Editor/customBlocks/dropdownInput/dropdownSettings.tsx index fc3b2c19..e5ae1568 100644 --- a/apps/web/src/components/v2Editor/customBlocks/dropdownInput/dropdownSettings.tsx +++ b/apps/web/src/components/v2Editor/customBlocks/dropdownInput/dropdownSettings.tsx @@ -236,24 +236,24 @@ const getCurrColumns = (currDataframe: DataFrame | null) => { const DynamicInput = (props: DynamicInputProps) => { const attrs = useYMemo( - props.blocks, - (blocks) => getDropdownInputAttributes(props.block, blocks), + [props.blocks], + () => getDropdownInputAttributes(props.block, props.blocks), [props.block] ) const dataframes = useYMemo( - props.dataframes, - (dataframes) => - Array.from(dataframes.values()).map((df) => ({ + [props.dataframes], + () => + Array.from(props.dataframes.values()).map((df) => ({ label: df.name, value: df.name, })), [] ) const currDataframe = useYMemo( - props.dataframes, - (dataframes) => getCurrDataframe(attrs.dataframeName, dataframes), - [attrs.dataframeName, props.dataframes] + [props.dataframes], + () => getCurrDataframe(attrs.dataframeName, props.dataframes), + [attrs.dataframeName] ) const columns = getCurrColumns(currDataframe) @@ -276,7 +276,7 @@ const DynamicInput = (props: DynamicInputProps) => { (col) => col.name === attrs.columnName ) const categories = - currCol && 'categories' in currCol ? (currCol.categories ?? []) : [] + currCol && 'categories' in currCol ? currCol.categories ?? [] : [] appendDropdownInputOptions( props.block, props.blocks, diff --git a/apps/web/src/components/v2Editor/customBlocks/visualizationV2/index.tsx b/apps/web/src/components/v2Editor/customBlocks/visualizationV2/index.tsx index 2a95eb3a..e9973fba 100644 --- a/apps/web/src/components/v2Editor/customBlocks/visualizationV2/index.tsx +++ b/apps/web/src/components/v2Editor/customBlocks/visualizationV2/index.tsx @@ -101,21 +101,21 @@ interface Props { } function VisualizationBlockV2(props: Props) { const attrs = useYMemo( - props.block, - (block) => getVisualizationV2Attributes(block), + [props.block], + () => getVisualizationV2Attributes(props.block), [] ) const dataframe = useYMemo( - props.block, - (block) => getDataframeFromVisualizationV2(block, props.dataframes), - [props.dataframes] + [props.block, props.dataframes], + () => getDataframeFromVisualizationV2(props.block, props.dataframes), + [] ) const dataframeOptions = useYMemo( - props.dataframes, - (dataframes) => - Array.from(dataframes.values()).map((df) => ({ + [props.dataframes], + () => + Array.from(props.dataframes.values()).map((df) => ({ value: df.name, label: df.name, })), diff --git a/apps/web/src/hooks/useYMemo.ts b/apps/web/src/hooks/useYMemo.ts index a2d98770..e22cd18a 100644 --- a/apps/web/src/hooks/useYMemo.ts +++ b/apps/web/src/hooks/useYMemo.ts @@ -30,23 +30,27 @@ interface YObservable { unobserveDeep: (fn: () => void) => void } export function useYMemo( - observable: O, - fn: (observable: O) => T, + observables: O[], + fn: () => T, deps: DependencyList ) { - const [value, setValue] = useResettableState(() => fn(observable), deps) + const [value, setValue] = useResettableState(() => fn(), deps) useEffect(() => { const onUpdate = () => { - setValue(fn(observable)) + setValue(fn()) } - observable.observeDeep(onUpdate) + for (const observable of observables) { + observable.observeDeep(onUpdate) + } return () => { - observable.unobserveDeep(onUpdate) + for (const observable of observables) { + observable.unobserveDeep(onUpdate) + } } - }, [observable, ...deps]) + }, [observables, ...deps]) return value }