From 3033fb035c48e23715edd541c05ce80fcc7d3f21 Mon Sep 17 00:00:00 2001
From: Michel Weststrate <mweststrate@fb.com>
Date: Tue, 9 Jun 2020 02:54:49 -0700
Subject: [PATCH] Evaluate copyText lazily

Summary:
`copyText` is generated when building rows for table, and is typically filled by JSON stringifying the incoming data. That is a pretty expensive process that could be done lazily. As shown in later diffs, this reduces the generation of rows for tables from ~18ms to ~3ms, which makes rendering a lot smoother.

(n.b. fixing the code duplication in the managedtables is part of the component lib plan)

Reviewed By: passy

Differential Revision: D21929660

fbshipit-source-id: 67cc69945e2bb28a6462a9d9ab765e33ced89378
---
 desktop/app/src/ui/components/table/ManagedTable.tsx       | 7 ++++---
 .../app/src/ui/components/table/ManagedTable_immutable.tsx | 7 ++++---
 desktop/app/src/ui/components/table/types.tsx              | 2 +-
 3 files changed, 9 insertions(+), 7 deletions(-)

diff --git a/desktop/app/src/ui/components/table/ManagedTable.tsx b/desktop/app/src/ui/components/table/ManagedTable.tsx
index 7a90223a9..2b8a07570 100644
--- a/desktop/app/src/ui/components/table/ManagedTable.tsx
+++ b/desktop/app/src/ui/components/table/ManagedTable.tsx
@@ -575,9 +575,10 @@ export class ManagedTable extends React.Component<
     }
     return this.props.rows
       .filter((row) => highlightedRows.has(row.key))
-      .map(
-        (row: TableBodyRow) =>
-          row.copyText || this.getTextContentOfRow(row.key).join('\t'),
+      .map((row: TableBodyRow) =>
+        typeof row.copyText === 'function'
+          ? row.copyText()
+          : row.copyText || this.getTextContentOfRow(row.key).join('\t'),
       )
       .join('\n');
   };
diff --git a/desktop/app/src/ui/components/table/ManagedTable_immutable.tsx b/desktop/app/src/ui/components/table/ManagedTable_immutable.tsx
index 1aecdfc3b..8507b9c37 100644
--- a/desktop/app/src/ui/components/table/ManagedTable_immutable.tsx
+++ b/desktop/app/src/ui/components/table/ManagedTable_immutable.tsx
@@ -551,9 +551,10 @@ class ManagedTable extends React.Component<
     }
     return this.props.rows
       .filter((row) => highlightedRows.has(row.key))
-      .map(
-        (row: TableBodyRow) =>
-          row.copyText || this.getTextContentOfRow(row.key).join('\t'),
+      .map((row: TableBodyRow) =>
+        typeof row.copyText === 'function'
+          ? row.copyText()
+          : row.copyText || this.getTextContentOfRow(row.key).join('\t'),
       )
       .join('\n');
   };
diff --git a/desktop/app/src/ui/components/table/types.tsx b/desktop/app/src/ui/components/table/types.tsx
index 904cdc5fd..d447d30cb 100644
--- a/desktop/app/src/ui/components/table/types.tsx
+++ b/desktop/app/src/ui/components/table/types.tsx
@@ -54,7 +54,7 @@ export type TableBodyRow = {
   type?: string | undefined;
   highlightedBackgroundColor?: BackgroundColorProperty | undefined;
   onDoubleClick?: (e: React.MouseEvent) => void;
-  copyText?: string;
+  copyText?: string | (() => string);
   requestBody?: string | null | undefined;
   responseBody?: string | null | undefined;
   highlightOnHover?: boolean;