Add more fields on the Tree nodes

Summary:
Add fields for colouring the changeset operation that was performed on a node in the tree.
Changesets are not ordered by type of operation, they need to be displayed in order

Reviewed By: danielbuechele

Differential Revision: D16121158

fbshipit-source-id: 411557170b16ada9d1d72fb617b1aaf583e0f0e7

src/plugins/sections/Tree.js

@@ -54,10 +54,14 @@ const Container = styled('div')({
 type TreeData = Array<{
   identifier: string,
   name: string,
-  parent: string | 0,
-  didTriggerStateUpdate: boolean,
-  isReused: boolean,
-  isDirty: boolean,
+  parent: string | '',
+  didTriggerStateUpdate?: boolean,
+  isReused?: boolean,
+  isDirty?: boolean,
+  inserted?: boolean,
+  removed?: boolean,
+  updated?: boolean,
+  unchanged?: boolean,
 }>;
 
 type Props = {
@@ -94,6 +98,16 @@ export default class extends PureComponent<Props, State> {
         fill = colors.grape;
       }
 
+      if (n.removed) {
+        fill = colors.light20;
+      } else if (n.inserted) {
+        fill = colors.pinkDark1;
+      } else if (n.updated) {
+        fill = colors.orangeTint15;
+      } else if (n.unchanged) {
+        fill = colors.teal;
+      }
+
       return {
         name: n.name,
         children: [],
@@ -226,9 +240,12 @@ export default class extends PureComponent<Props, State> {
             step="0.01"
           />
           <Spacer />
-          <Legend color={colors.lemon}>triggered state update</Legend>
-          <Legend color={colors.teal}>is reused</Legend>
-          <Legend color={colors.grape}>is dirty</Legend>
+          <Legend color={colors.light20}>Item removed</Legend>
+          <Legend color={colors.pinkDark1}>Item inserted</Legend>
+          <Legend color={colors.orangeTint15}>Item updated</Legend>
+          <Legend color={colors.teal}>Item/Section Reused</Legend>
+          <Legend color={colors.lemon}>Section triggered state update</Legend>
+          <Legend color={colors.grape}>Section is dirty</Legend>
         </Toolbar>
       </Fragment>
     );