Improvement of live editing

Summary:
Live editing is now working faster.
We had an issue that it took about 5 seconds to see the view changed and 10 seconds to see tha value in the flipper, now it's done immidiately

Reviewed By: priteshrnandgaonkar

Differential Revision: D16500961

fbshipit-source-id: 742ce628a887bab06c1b883d9710c477af2508e7

iOS/Plugins/FlipperKitLayoutPlugin/FlipperKitLayoutPlugin/FlipperKitLayoutPlugin.mm

@@ -148,6 +148,18 @@
   return;
 }
 
+- (void)populateAllNodesFromNode:(nonnull NSString *)identifier inArray:(nonnull NSMutableArray<NSDictionary *> *)mutableArray {
+  NSDictionary *nodeDict = [self getNode:identifier];
+  if (nodeDict == nil) {
+    return;
+  }
+  [mutableArray addObject:nodeDict];
+  NSArray *children = nodeDict[@"children"];
+  for (NSString *childIdentifier in children) {
+    [self populateAllNodesFromNode:childIdentifier inArray:mutableArray];
+  }
+}
+
 - (void)onCallGetAllNodesWithResponder:(nonnull id<FlipperResponder>)responder {
   NSMutableArray<NSDictionary*> *allNodes = @[].mutableCopy;
   NSString *identifier = [self trackObject: _rootNode];
@@ -216,11 +228,11 @@
     const auto identifierForInvalidation = [descriptor identifierForInvalidation:node];
     id nodeForInvalidation = [_trackedObjects objectForKey:identifierForInvalidation];
     SKNodeDescriptor *descriptorForInvalidation = [_descriptorMapper descriptorForClass:[nodeForInvalidation class]];
-    NSMutableArray *children = [self getChildrenForNode:nodeForInvalidation withDescriptor:descriptorForInvalidation];
     updateDataForPath(value);
-    [connection send: @"invalidate" withParams: @{
-      @"nodes": @[@{@"id": [descriptorForInvalidation identifierForNode: nodeForInvalidation], @"children": children}]
-    }];
+    
+    NSMutableArray *nodesForInvalidation = [NSMutableArray new];
+    [self populateAllNodesFromNode:[descriptorForInvalidation identifierForNode:nodeForInvalidation] inArray:nodesForInvalidation];
+    [connection send: @"invalidateWithData" withParams: @{@"nodes": nodesForInvalidation}];
   }
 }
 

src/plugins/layout/Inspector.js

@@ -15,7 +15,7 @@ import {ElementsInspector} from 'flipper';
 import {Component} from 'react';
 import debounce from 'lodash.debounce';
 
-import type {PersistedState} from './';
+import type {PersistedState, ElementMap} from './';
 
 type GetNodesOptions = {
   force?: boolean,
@@ -45,6 +45,9 @@ export default class Inspector extends Component<Props> {
       GET_NODES: this.props.ax ? 'getAXNodes' : 'getNodes',
       SET_HIGHLIGHTED: 'setHighlighted',
       SELECT: this.props.ax ? 'selectAX' : 'select',
+      INVALIDATE_WITH_DATA: this.props.ax
+        ? 'invalidateWithDataAX'
+        : 'invalidateWithData',
     };
   }
 
@@ -113,6 +116,14 @@ export default class Inspector extends Component<Props> {
       },
     );
 
+    this.props.client.subscribe(
+      this.call().INVALIDATE_WITH_DATA,
+      (obj: {nodes: Array<Element>}) => {
+        const {nodes} = obj;
+        this.invalidateWithData(nodes);
+      },
+    );
+
     this.props.client.subscribe(
       this.call().SELECT,
       ({path}: {path: Array<ElementID>}) => {
@@ -159,6 +170,28 @@ export default class Inspector extends Component<Props> {
     }
   }
 
+  invalidateWithData(elements: Array<Element>): void {
+    if (elements.length === 0) {
+      return;
+    }
+    const updatedElements: ElementMap = elements.reduce(
+      (acc: ElementMap, element: Element) => {
+        acc[element.id] = {
+          ...element,
+          expanded: this.elements()[element.id]?.expanded,
+        };
+        return acc;
+      },
+      new Map(),
+    );
+    this.props.setPersistedState({
+      [this.props.ax ? 'AXelements' : 'elements']: {
+        ...this.elements(),
+        ...updatedElements,
+      },
+    });
+  }
+
   invalidate(ids: Array<ElementID>): Promise<Array<Element>> {
     if (ids.length === 0) {
       return Promise.resolve([]);