Performance optimizations

Summary:
This diff removes a bunch of performance bottlenecks of `DataInspector`, mostly by making sure that non new data structures are send to children during rendering. For example, before this diff, fields like `expanded`, `ancestry` and `path` would always be freshly constructed, resulting in new data structures send down, causing the full json tree to always re-render.

By migrating to hooks this became a lot easy to manage.

Also fixed some other minor component reuse issues

Fixed rendering of recursive trees which was broken in the past, and added regression test

Fixed issue with uppercase search string causing unnecessary re-filtering

Make sure changing expand / collapse resets the filter

Reviewed By: passy

Differential Revision: D21381647

fbshipit-source-id: 72834e15088432f55b4b9c88f182ffc9908d4e49

desktop/app/src/ui/components/data-inspector/DataDescription.tsx

@@ -12,7 +12,6 @@ import {DataInspectorSetValue} from './DataInspector';
 import {PureComponent} from 'react';
 import styled from '@emotion/styled';
 import {SketchPicker, CompactPicker} from 'react-color';
-import {Component, Fragment} from 'react';
 import Popover from '../Popover';
 import {colors} from '../colors';
 import Input from '../Input';
@@ -276,7 +275,7 @@ export default class DataDescription extends PureComponent<
           type={this.props.type}
           value={this.props.value}
           extra={this.props.extra}
-          editable={Boolean(this.props.setValue)}
+          editable={!!this.props.setValue}
           commit={this.commit}
           onEdit={this.onEditStart}
         />
@@ -359,7 +358,7 @@ class ColorEditor extends PureComponent<{
   render() {
     const colorInfo = parseColor(this.props.value);
     if (!colorInfo) {
-      return <Fragment />;
+      return null;
     }
 
     return (
@@ -440,7 +439,7 @@ class ColorEditor extends PureComponent<{
   }
 }
 
-class DataDescriptionPreview extends Component<{
+class DataDescriptionPreview extends PureComponent<{
   type: string;
   value: any;
   extra?: any;
@@ -539,7 +538,9 @@ function parseColor(
   return {a, b, g, r};
 }
 
-class DataDescriptionContainer extends Component<{
+const pencilStyle = {cursor: 'pointer', marginLeft: 8};
+
+class DataDescriptionContainer extends PureComponent<{
   type: string;
   value: any;
   editable: boolean;
@@ -563,7 +564,7 @@ class DataDescriptionContainer extends Component<{
 
     switch (type) {
       case 'number':
-        return <NumberValue>{Number(val)}</NumberValue>;
+        return <NumberValue>{+val}</NumberValue>;
 
       case 'color': {
         const colorInfo = parseColor(val);
@@ -620,7 +621,7 @@ class DataDescriptionContainer extends Component<{
                 variant="outline"
                 color={colors.light20}
                 size={16}
-                style={{cursor: 'pointer', marginLeft: 8}}
+                style={pencilStyle}
               />
             </>
           );
@@ -637,12 +638,12 @@ class DataDescriptionContainer extends Component<{
         return editable ? (
           <input
             type="checkbox"
-            checked={Boolean(val)}
+            checked={!!val}
             disabled={!editable}
             onChange={this.onChangeCheckbox}
           />
         ) : (
-          <StringValue>{String(val)}</StringValue>
+          <StringValue>{'' + val}</StringValue>
         );
 
       case 'undefined':