fix: case table updating while dragging points in a graph (#1608)

concord-consortium · Nov 9, 2024 · 668e369 · 668e369
1 parent dacc477
commit 668e369
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 6 deletions.
diff --git a/v3/src/components/case-table/collection-table.tsx b/v3/src/components/case-table/collection-table.tsx
@@ -93,7 +93,7 @@ export const CollectionTable = observer(function CollectionTable(props: IProps)
   const columns = useColumns({ data, indexColumn })
 
   // rows
-  const { handleRowsChange } = useRows()
+  const { handleRowsChange } = useRows(gridRef.current?.element ?? null)
   const rowKey = (row: TRow) => row.__id__
 
   const { setNodeRef } = useTileDroppable(`${kCollectionTableBodyDropZoneBaseId}-${collectionId}`)

diff --git a/v3/src/components/case-table/use-rows.ts b/v3/src/components/case-table/use-rows.ts
@@ -22,7 +22,7 @@ import { applyCaseValueChanges } from "../case-tile-common/case-tile-utils"
 import { kInputRowKey, symDom, TRow, TRowsChangeData } from "./case-table-types"
 import { useCollectionTableModel } from "./use-collection-table-model"
 
-export const useRows = () => {
+export const useRows = (gridElement: HTMLDivElement | null) => {
   const caseMetadata = useCaseMetadata()
   const data = useDataSetContext()
   const collectionId = useCollectionContext()
@@ -74,15 +74,14 @@ export const useRows = () => {
   const syncRowsToDom = useCallback(() => {
     prf.measure("Table.useRows[syncRowsToDom]", () => {
       const collection = data?.getCollection(collectionId)
-      const grid = document.querySelector(".rdg")
-      const domRows = grid?.querySelectorAll(".rdg-row")
+      const domRows = gridElement?.querySelectorAll(".rdg-row")
       domRows?.forEach(row => {
         const rowIndex = Number(row.getAttribute("aria-rowindex")) - 2
         const caseId = collection?.caseIds[rowIndex]
         const cells = row.querySelectorAll(".rdg-cell")
         cells.forEach(cell => {
           const colIndex = Number(cell.getAttribute("aria-colindex")) - 2
-          const attr = data?.attributes[colIndex]
+          const attr = collection?.attributes[colIndex]
           const cellSpan = cell.querySelector(".cell-span")
           if (data && caseId && attr && cellSpan) {
             const strValue = data.getStrValue(caseId, attr.id)
@@ -95,7 +94,7 @@ export const useRows = () => {
         })
       })
     })
-  }, [collectionId, data, setCachedDomAttr])
+  }, [collectionId, data, gridElement, setCachedDomAttr])
 
   const resetRowCacheAndSyncRows = useDebouncedCallback(() => {
     resetRowCache()