Display data model in side panel

Summary:
This displays the data models passed to the Sections in the side panel when a data node is clicked. This does not change the collapse behaviour when a Section node is clicked.
To make it easier to associate a section with its changesets, appended the global indexes a Section is responsible for to the node label.

Reviewed By: passy

Differential Revision: D16283820

fbshipit-source-id: f1149f47dff448de05d919f7f8d16a2aba53bbb0

src/plugins/sections/DetailsPanel.js

@@ -32,6 +32,7 @@ type Props = {|
   onFocusChangeSet: (
     focusedChangeSet: ?UpdateTreeGenerationChangesetApplicationPayload,
   ) => void,
+  selectedNodeInfo: ?Object,
 |};
 
 export default class DetailsPanel extends Component<Props> {
@@ -82,6 +83,14 @@ export default class DetailsPanel extends Component<Props> {
             />
           </Panel>
         )}
+        {this.props.selectedNodeInfo && (
+          <Panel floating={false} heading="Selected Node Info">
+            <ManagedDataInspector
+              data={this.props.selectedNodeInfo}
+              expandRoot={true}
+            />
+          </Panel>
+        )}
       </React.Fragment>
     );
   }

src/plugins/sections/Models.js

@@ -36,6 +36,8 @@ export type UpdateTreeGenerationHierarchyGenerationPayload = {|
     removed?: boolean,
     updated?: boolean,
     unchanged?: boolean,
+    isSection?: boolean,
+    isDataModel?: boolean,
   }>,
 |};
 

src/plugins/sections/Tree.js

@@ -66,6 +66,7 @@ type TreeData = Array<{
 
 type Props = {
   data: TreeData | SectionComponentHierarchy,
+  nodeClickHandler?: (node, evt) => void,
 };
 
 type State = {
@@ -227,6 +228,7 @@ export default class extends PureComponent<Props, State> {
                 },
               }}
               nodeSize={{x: 300, y: 100}}
+              onClick={this.props.nodeClickHandler}
             />
           )}
         </Container>

src/plugins/sections/index.js

@@ -59,6 +59,7 @@ const InfoBox = styled('div')(props => ({
 type State = {
   focusedChangeSet: ?UpdateTreeGenerationChangesetApplicationPayload,
   userSelectedGenerationId: ?string,
+  selectedTreeNode: ?Object,
 };
 
 type PersistedState = {
@@ -149,12 +150,14 @@ export default class extends FlipperPlugin<State, *, PersistedState> {
   state = {
     focusedChangeSet: null,
     userSelectedGenerationId: null,
+    selectedTreeNode: null,
   };
 
   onTreeGenerationFocused = (focusedGenerationId: ?string) => {
     this.setState({
       focusedChangeSet: null,
       userSelectedGenerationId: focusedGenerationId,
+      selectedTreeNode: null,
     });
   };
 
@@ -163,20 +166,50 @@ export default class extends FlipperPlugin<State, *, PersistedState> {
   ) => {
     this.setState({
       focusedChangeSet,
+      selectedTreeNode: null,
+    });
+  };
+
+  onNodeClicked = (targetNode, evt) => {
+    if (targetNode.attributes.isSection) {
+      this.setState({
+        selectedTreeNode: null,
+      });
+      return;
+    }
+
+    let dataModel;
+    const selectedTreeNode = {};
+    // Not all models can be parsed.
+    if (targetNode.attributes.isDataModel) {
+      try {
+        dataModel = JSON.parse(targetNode.attributes.identifier);
+      } catch (e) {
+        dataModel = targetNode.attributes.identifier;
+      }
+    }
+
+    this.setState({
+      selectedTreeNode: {dataModel},
     });
   };
 
   renderTreeHierarchy = (generation: ?TreeGeneration) => {
     if (generation && generation.tree && generation.tree.length > 0) {
       // Display component tree hierarchy, if any
-      return <Tree data={generation.tree} />;
+      return (
+        <Tree data={generation.tree} nodeClickHandler={this.onNodeClicked} />
+      );
     } else if (
       this.state.focusedChangeSet &&
       this.state.focusedChangeSet.section_component_hierarchy
     ) {
       // Display section component hierarchy for specific changeset
       return (
-        <Tree data={this.state.focusedChangeSet.section_component_hierarchy} />
+        <Tree
+          data={this.state.focusedChangeSet.section_component_hierarchy}
+          nodeClickHandler={this.onNodeClicked}
+        />
       );
     } else {
       return this.renderWaiting();
@@ -258,6 +291,7 @@ export default class extends FlipperPlugin<State, *, PersistedState> {
             changeSets={focusedTreeGeneration?.changeSets}
             onFocusChangeSet={this.onFocusChangeSet}
             focusedChangeSet={this.state.focusedChangeSet}
+            selectedNodeInfo={this.state.selectedTreeNode}
           />
         </DetailSidebar>
       </React.Fragment>