From 89d4a4c6a10cc749751ed0893e5d26debb207f23 Mon Sep 17 00:00:00 2001
From: mattseddon <37993418+mattseddon@users.noreply.github.com>
Date: Wed, 25 May 2022 04:23:59 +1000
Subject: [PATCH] Patch timing of comparison table rendering (#1759)

---
 .../plots/components/comparisonTable/ComparisonTable.tsx    | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/webview/src/plots/components/comparisonTable/ComparisonTable.tsx b/webview/src/plots/components/comparisonTable/ComparisonTable.tsx
index 5538cd2020..8af03e8720 100644
--- a/webview/src/plots/components/comparisonTable/ComparisonTable.tsx
+++ b/webview/src/plots/components/comparisonTable/ComparisonTable.tsx
@@ -1,4 +1,5 @@
 import {
+  ComparisonPlots,
   ComparisonRevision,
   PlotsComparisonData
 } from 'dvc/src/plots/webview/contract'
@@ -26,6 +27,7 @@ export const ComparisonTable: React.FC<ComparisonTableProps> = ({
 }) => {
   const pinnedColumn = useRef(currentPinnedColumn || '')
   const [columns, setColumns] = useState<ComparisonTableColumn[]>([])
+  const [comparisonPlots, setComparisonPlots] = useState<ComparisonPlots>([])
 
   const isPinned = (column: ComparisonTableColumn): boolean =>
     column.revision === pinnedColumn.current
@@ -54,6 +56,8 @@ export const ComparisonTable: React.FC<ComparisonTableProps> = ({
     [revisions, getPinnedColumnRevision]
   )
 
+  useEffect(() => setComparisonPlots(plots), [plots])
+
   const setColumnsOrder = (order: string[]) => {
     const newOrder = reorderObjectList<ComparisonRevision>(
       order,
@@ -91,7 +95,7 @@ export const ComparisonTable: React.FC<ComparisonTableProps> = ({
         setColumnsOrder={setColumnsOrder}
         setPinnedColumn={changePinnedColumn}
       />
-      {plots.map(({ path, revisions: revs }) => (
+      {comparisonPlots.map(({ path, revisions: revs }) => (
         <ComparisonTableRow
           key={path}
           path={path}