From ed4c9763a217a19b0101512781d74cac6fbd946b Mon Sep 17 00:00:00 2001
From: Stephanie Roy <sroy3@users.noreply.github.com>
Date: Fri, 29 Jul 2022 11:06:01 -0400
Subject: [PATCH] Keep old reference in the state if they have not changed
 (#2114)

* Keep old references in the tableData

* Make update function more compact
---
 .../components/table/tableDataSlice.ts        | 28 +++++++++++++++++--
 webview/src/util/array.ts                     |  9 ++++++
 webview/src/util/objects.ts                   |  6 +++-
 3 files changed, 40 insertions(+), 3 deletions(-)

diff --git a/webview/src/experiments/components/table/tableDataSlice.ts b/webview/src/experiments/components/table/tableDataSlice.ts
index 953b1456a5..cca2a285ee 100644
--- a/webview/src/experiments/components/table/tableDataSlice.ts
+++ b/webview/src/experiments/components/table/tableDataSlice.ts
@@ -1,5 +1,9 @@
 import { createSlice, PayloadAction } from '@reduxjs/toolkit'
-import { TableData } from 'dvc/src/experiments/webview/contract'
+import { FilteredCounts } from 'dvc/src/experiments/model/filterBy/collect'
+import { SortDefinition } from 'dvc/src/experiments/model/sortBy'
+import { Column, Row, TableData } from 'dvc/src/experiments/webview/contract'
+import { keepEqualOldReferencesInArray } from '../../../util/array'
+import { keepReferenceIfEqual } from '../../../util/objects'
 
 export interface TableDataState extends TableData {
   hasData?: boolean
@@ -32,7 +36,27 @@ export const tableDataSlice = createSlice({
         return {
           ...state,
           ...action.payload,
-          hasData: true
+          columnWidths: keepReferenceIfEqual(
+            state.columnWidths,
+            action.payload.columnWidths
+          ) as Record<string, number>,
+          columns: keepEqualOldReferencesInArray(
+            state.columns,
+            action.payload.columns
+          ) as Column[],
+          filteredCounts: keepReferenceIfEqual(
+            state.filteredCounts,
+            action.payload.filteredCounts
+          ) as FilteredCounts,
+          hasData: true,
+          rows: keepEqualOldReferencesInArray(
+            state.rows,
+            action.payload.rows
+          ) as Row[],
+          sorts: keepEqualOldReferencesInArray(
+            state.sorts,
+            action.payload.sorts
+          ) as SortDefinition[]
         }
       }
       return tableDataInitialState
diff --git a/webview/src/util/array.ts b/webview/src/util/array.ts
index 1f8c5e7ab4..bbc0572976 100644
--- a/webview/src/util/array.ts
+++ b/webview/src/util/array.ts
@@ -1,2 +1,11 @@
+import isEqual from 'lodash.isequal'
+import { BaseType } from './objects'
+
 export const pushIf = <T>(array: T[], condition: boolean, elements: T[]) =>
   condition && array.push(...elements)
+
+export const keepEqualOldReferencesInArray = (
+  oldArray: BaseType[],
+  newArray: BaseType[]
+) =>
+  newArray.map(item => oldArray.find(oldItem => isEqual(oldItem, item)) || item)
diff --git a/webview/src/util/objects.ts b/webview/src/util/objects.ts
index eb7f94fd8e..df9b40636d 100644
--- a/webview/src/util/objects.ts
+++ b/webview/src/util/objects.ts
@@ -1,3 +1,4 @@
+import isEqual from 'lodash.isequal'
 import { reorderObjectList } from 'dvc/src/util/array'
 
 export const performOrderedUpdate = (
@@ -22,6 +23,9 @@ export const performSimpleOrderedUpdate = (
   return [...newOrder]
 }
 
-type BaseType = string | number | boolean | Object | undefined | null
+export type BaseType = string | number | boolean | Object | undefined | null
 
 export type Any = BaseType | BaseType[]
+
+export const keepReferenceIfEqual = (old: BaseType, recent: BaseType) =>
+  isEqual(old, recent) ? old : recent