Refactor Data Used And Passed to Detail Sidebar

Summary:
As suggested in the previous diff, I change the way to store row values. Now, (kinda) raw values are stored instead of processed values that can be used directly for `ManagedTable`. This simplifies logic in detail sidebar.

I'm not sure what the effect to performance.

Reviewed By: mweststrate

Differential Revision: D21621896

fbshipit-source-id: 472be3caa955ca32f876f81095af21e9c17cb159

desktop/plugins/databases/DatabaseDetailSidebar.tsx

@@ -7,8 +7,7 @@
  * @format
  */
 
-import React from 'react';
-import {QueriedTable} from '.';
+import React, {useMemo} from 'react';
 import {
   Text,
   DetailSidebar,
@@ -17,53 +16,29 @@ import {
   TableRows,
   TableBodyRow,
   ManagedDataInspector,
+  Value,
+  renderValue,
 } from 'flipper';
 
-function sidebarRows(id: number, table: QueriedTable): TableRows {
-  const columns = table.columns;
-  const row = table.rows[id];
-  if (columns.length === 1) {
-    const sidebarArray = [];
-    // TODO(T60896483): Narrow the scope of this try/catch block.
-    try {
-      const parsed = JSON.parse(row.columns[columns[0]].value.props.children);
-      for (const key in parsed) {
-        sidebarArray.push(
-          buildSidebarRow(key, {
-            props: {
-              children: parsed[key],
-            },
-          }),
-        );
-      }
-    } catch (e) {
-      sidebarArray.push(
-        buildSidebarRow(columns[0], row.columns[columns[0]].value),
-      );
-    }
-    return sidebarArray;
-  } else {
-    return columns.map((column, i) =>
-      buildSidebarRow(columns[i], row.columns[columns[i]].value),
-    );
-  }
+type DatabaseDetailSidebarProps = {
+  columnLabels: Array<string>;
+  columnValues: Array<Value>;
+};
+
+function sidebarRows(labels: Array<string>, values: Array<Value>): TableRows {
+  return labels.map((label, idx) => buildSidebarRow(label, values[idx]));
 }
 
-function buildSidebarRow(key: string, val: any): TableBodyRow {
-  let output: any = '';
+function buildSidebarRow(key: string, val: Value): TableBodyRow {
+  let output = renderValue(val, true);
   // TODO(T60896483): Narrow the scope of this try/catch block.
+  if (val.type === 'string') {
     try {
-    const parsed = JSON.parse(val.props.children);
-    for (const key in parsed) {
-      try {
-        parsed[key] = JSON.parse(parsed[key]);
-      } catch (err) {}
-    }
+      const parsed = JSON.parse(val.value);
       output = (
         <ManagedDataInspector data={parsed} expandRoot={false} collapsed />
       );
-  } catch (error) {
-    output = val;
+    } catch (_error) {}
   }
   return {
     columns: {
@@ -76,19 +51,7 @@ function buildSidebarRow(key: string, val: any): TableBodyRow {
   };
 }
 
-export default React.memo(function DatabaseDetailSidebar(props: {
-  table: QueriedTable;
-}) {
-  const {table} = props;
-  if (
-    table.highlightedRows === null ||
-    typeof table.highlightedRows === 'undefined' ||
-    table.highlightedRows.length !== 1
-  ) {
-    return null;
-  }
-  const id = table.highlightedRows[0];
-  const cols = {
+const cols = {
   col: {
     value: 'Column',
     resizable: true,
@@ -97,11 +60,20 @@ export default React.memo(function DatabaseDetailSidebar(props: {
     value: 'Value',
     resizable: true,
   },
-  };
-  const colSizes = {
+};
+const colSizes = {
   col: '35%',
   val: 'flex',
-  };
+};
+
+export default React.memo(function DatabaseDetailSidebar(
+  props: DatabaseDetailSidebarProps,
+) {
+  const {columnLabels, columnValues} = props;
+  const rows = useMemo(() => sidebarRows(columnLabels, columnValues), [
+    columnLabels,
+    columnValues,
+  ]);
   return (
     <DetailSidebar>
       <Panel
@@ -117,7 +89,7 @@ export default React.memo(function DatabaseDetailSidebar(props: {
           autoHeight={true}
           floating={false}
           zebra={false}
-          rows={sidebarRows(id, table)}
+          rows={rows}
         />
       </Panel>
     </DetailSidebar>

desktop/plugins/databases/index.tsx

@@ -26,13 +26,14 @@ import {
   TableBodyColumn,
   TableRows,
   Props as FlipperPluginProps,
+  TableBodyRow,
+  TableRowSortOrder,
+  FlipperPlugin,
+  Value,
+  renderValue,
 } from 'flipper';
 import React, {Component, KeyboardEvent, ChangeEvent} from 'react';
-import {TableBodyRow, TableRowSortOrder} from 'flipper';
-import {FlipperPlugin} from 'flipper';
 import {DatabaseClient} from './ClientProtocol';
-import {renderValue} from 'flipper';
-import {Value} from 'flipper';
 import ButtonNavigation from './ButtonNavigation';
 import DatabaseDetailSidebar from './DatabaseDetailSidebar';
 import sqlFormatter from 'sql-formatter';
@@ -86,7 +87,7 @@ type Page = {
   databaseId: number;
   table: string;
   columns: Array<string>;
-  rows: Array<TableBodyRow>;
+  rows: Array<Array<Value>>;
   start: number;
   count: number;
   total: number;
@@ -110,7 +111,7 @@ type QueryResult = {
 
 export type QueriedTable = {
   columns: Array<string>;
-  rows: Array<TableBodyRow>;
+  rows: Array<Array<Value>>;
   highlightedRows: Array<number>;
 };
 
@@ -170,7 +171,7 @@ type UpdatePageEvent = {
   databaseId: number;
   table: string;
   columns: Array<string>;
-  values: Array<Array<any>>;
+  values: Array<Array<Value>>;
   start: number;
   count: number;
   total: number;
@@ -181,15 +182,15 @@ type UpdateStructureEvent = {
   databaseId: number;
   table: string;
   columns: Array<string>;
-  rows: Array<Array<any>>;
+  rows: Array<Array<Value>>;
   indexesColumns: Array<string>;
-  indexesValues: Array<Array<any>>;
+  indexesValues: Array<Array<Value>>;
 };
 
 type DisplaySelectEvent = {
   type: 'DisplaySelect';
   columns: Array<string>;
-  values: Array<Array<any>>;
+  values: Array<Array<Value>>;
 };
 
 type DisplayInsertEvent = {
@@ -529,9 +530,7 @@ export default class DatabasesPlugin extends FlipperPlugin<
         return {
           ...state,
           currentPage: {
-            rows: event.values.map((row: Array<Value>, index: number) =>
-              transformRow(event.columns, row, index),
-            ),
+            rows: event.values,
             highlightedRows: [],
             ...event,
           },
@@ -573,9 +572,7 @@ export default class DatabasesPlugin extends FlipperPlugin<
           queryResult: {
             table: {
               columns: event.columns,
-              rows: event.values.map((row: Array<Value>, index: number) =>
-                transformRow(event.columns, row, index),
-              ),
+              rows: event.values,
               highlightedRows: [],
             },
             id: null,
@@ -1083,7 +1080,9 @@ export default class DatabasesPlugin extends FlipperPlugin<
             {},
           )}
           zebra={true}
-          rows={page.rows}
+          rows={page.rows.map((row: Array<Value>, index: number) =>
+            transformRow(page.columns, row, index),
+          )}
           horizontallyScrollable={true}
           multiHighlight={true}
           onRowHighlighted={(highlightedRows) =>
@@ -1105,7 +1104,12 @@ export default class DatabasesPlugin extends FlipperPlugin<
           }}
           initialSortOrder={this.state.currentSort ?? undefined}
         />
-        <DatabaseDetailSidebar table={page} />
+        {page.highlightedRows.length === 1 && (
+          <DatabaseDetailSidebar
+            columnLabels={page.columns}
+            columnValues={page.rows[page.highlightedRows[0]]}
+          />
+        )}
       </FlexRow>
     );
   }
@@ -1137,7 +1141,9 @@ export default class DatabasesPlugin extends FlipperPlugin<
               {},
             )}
             zebra={true}
-            rows={rows}
+            rows={rows.map((row: Array<Value>, index: number) =>
+              transformRow(columns, row, index),
+            )}
             horizontallyScrollable={true}
             onRowHighlighted={(highlightedRows) => {
               this.setState({
@@ -1153,7 +1159,12 @@ export default class DatabasesPlugin extends FlipperPlugin<
               });
             }}
           />
-          <DatabaseDetailSidebar table={table} />
+          {table.highlightedRows.length === 1 && (
+            <DatabaseDetailSidebar
+              columnLabels={table.columns}
+              columnValues={table.rows[table.highlightedRows[0]]}
+            />
+          )}
         </FlexRow>
       );
     } else if (query.id && query.id !== null) {