fix not refreshing df columns at visualization v2 block

briefercloud · Jan 30, 2025 · b0f67c3 · b0f67c3
1 parent c8a20bd
commit b0f67c3
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 24 deletions.
diff --git 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
@@ -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
@@ -30,23 +30,27 @@ interface YObservable {
   unobserveDeep: (fn: () => void) => void
 }
 export function useYMemo<O extends YObservable, T>(
-  observable: O,
-  fn: (observable: O) => T,
+  observables: O[],
+  fn: () => T,
   deps: DependencyList
 ) {
-  const [value, setValue] = useResettableState<T>(() => fn(observable), deps)
+  const [value, setValue] = useResettableState<T>(() => 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
 }