Shuffle around funcStack conversion and focus the tree on load.

m1rp · May 13, 2016 · 900d894 · 900d894
1 parent 18c164e
commit 900d894
Show file tree

Hide file tree

Showing 5 changed files with 55 additions and 27 deletions.
diff --git a/src/components/ProfileThreadHeaderBar.js b/src/components/ProfileThreadHeaderBar.js
@@ -40,7 +40,7 @@ ProfileThreadHeaderBar.propTypes = {
   rangeEnd: PropTypes.number.isRequired,
   funcStackInfo: PropTypes.shape({
     funcStackTable: PropTypes.object.isRequired,
-    sampleFuncStacks: PropTypes.object.isRequired,
+    sampleFuncStacks: PropTypes.array.isRequired,
   }).isRequired,
   selectedFuncStack: PropTypes.number.isRequired,
   isSelected: PropTypes.bool.isRequired,

diff --git a/src/components/ProfileTreeView.js b/src/components/ProfileTreeView.js
@@ -1,15 +1,10 @@
 import React, { Component, PropTypes } from 'react';
-import { connect } from 'react-redux';
 import TreeView from './TreeView';
-import { getStackAsFuncArray } from '../profile-data';
 import { getCallTree } from '../profile-tree';
-import * as Actions from '../actions';
 
 class ProfileTreeView extends Component{
   constructor(props) {
     super(props);
-    this._onSelectionChange = this._onSelectionChange.bind(this);
-    this._onExpandedNodesChange = this._onExpandedNodesChange.bind(this);
     this._fixedColumns = [
       { propName: 'totalTime', title: 'Running Time' },
       { propName: 'totalTimePercent', title: '' },
@@ -18,20 +13,6 @@ class ProfileTreeView extends Component{
     this._mainColumn = { propName:'name', title: '' };
   }
 
-  _onSelectionChange(newSelectedNodeId) {
-    const { dispatch } = this.props;
-    dispatch(Actions.changeSelectedFuncStack(this.props.threadIndex,
-      getStackAsFuncArray(newSelectedNodeId, this.props.funcStackInfo.funcStackTable)));
-  }
-
-  _onExpandedNodesChange(newExpandedNodeIds) {
-    const { dispatch } = this.props;
-    const newExpandedFuncStacks =
-      newExpandedNodeIds.map(nodeId => getStackAsFuncArray(nodeId, this.props.funcStackInfo.funcStackTable));
-    dispatch(Actions.changeExpandedFuncStacks(this.props.threadIndex,
-      newExpandedFuncStacks));
-  }
-
   componentWillMount() {
     const { thread, interval, funcStackInfo } = this.props;
     this._tree = getCallTree(thread, interval, funcStackInfo);
@@ -44,15 +25,24 @@ class ProfileTreeView extends Component{
     }
   }
 
+  focus() {
+    this.refs.treeView.focus();
+  }
+
+  procureInterestingInitialSelection() {
+
+  }
+
   render() {
     return (
       <TreeView tree={this._tree}
                 fixedColumns={this._fixedColumns}
                 mainColumn={this._mainColumn}
-                onSelectionChange={this._onSelectionChange}
-                onExpandedNodesChange={this._onExpandedNodesChange}
+                onSelectionChange={this.props.onSelectedFuncStackChange}
+                onExpandedNodesChange={this.props.onExpandedFuncStacksChange}
                 selectedNodeId={this.props.selectedFuncStack}
-                expandedNodeIds={this.props.expandedFuncStacks} />
+                expandedNodeIds={this.props.expandedFuncStacks}
+                ref='treeView'/>
     );
 
   }
@@ -70,7 +60,8 @@ ProfileTreeView.propTypes = {
   }).isRequired,
   selectedFuncStack: PropTypes.number,
   expandedFuncStacks: PropTypes.array.isRequired,
-  dispatch: PropTypes.func.isRequired,
+  onSelectedFuncStackChange: PropTypes.func.isRequired,
+  onExpandedFuncStacksChange: PropTypes.func.isRequired,
 };
 
-export default connect()(ProfileTreeView);
+export default ProfileTreeView;
diff --git a/src/components/ProfileViewer.js b/src/components/ProfileViewer.js
@@ -2,7 +2,7 @@ import React, { Component, PropTypes } from 'react';
 import { connect } from 'react-redux';
 import shallowequal from 'shallowequal';
 import { getTimeRangeIncludingAllThreads } from '../profile-data';
-import { getFuncStackInfo, filterThreadToJSOnly, getFuncStackFromFuncArray, invertCallstack } from '../profile-data';
+import { getFuncStackInfo, filterThreadToJSOnly, getFuncStackFromFuncArray, getStackAsFuncArray, invertCallstack } from '../profile-data';
 import ProfileTreeView from '../components/ProfileTreeView';
 import ProfileThreadHeaderBar from '../components/ProfileThreadHeaderBar';
 import ProfileViewSidebar from '../components/ProfileViewSidebar';
@@ -14,6 +14,8 @@ class ProfileViewer extends Component {
     this._cachedFuncStackInfos = [];
     this._cachedJSOnly = null;
     this._onProfileTitleClick = this._onProfileTitleClick.bind(this);
+    this._onSelectedFuncStackChange = this._onSelectedFuncStackChange.bind(this);
+    this._onExpandedFuncStacksChange = this._onExpandedFuncStacksChange.bind(this);
   }
 
   _filterToJSOnly(thread) {
@@ -62,6 +64,30 @@ class ProfileViewer extends Component {
     this.props.dispatch(Actions.changeSelectedThread(threadIndex));
   }
 
+  _onSelectedFuncStackChange(newSelectedFuncStack) {
+    const { dispatch, viewOptions, profile } = this.props;
+    const { selectedThread } = viewOptions;
+    const thread = profile.threads[selectedThread];
+    const funcStackInfo = this._getFuncStackInfo(selectedThread, thread);
+    dispatch(Actions.changeSelectedFuncStack(selectedThread,
+      getStackAsFuncArray(newSelectedFuncStack, funcStackInfo.funcStackTable)));
+  }
+
+  _onExpandedFuncStacksChange(newExpandedFuncStacks) {
+    const { dispatch, viewOptions, profile } = this.props;
+    const { selectedThread } = viewOptions;
+    const thread = profile.threads[selectedThread];
+    const funcStackInfo = this._getFuncStackInfo(selectedThread, thread);
+    dispatch(Actions.changeExpandedFuncStacks(selectedThread,
+      newExpandedFuncStacks.map(funcStackIndex => getStackAsFuncArray(funcStackIndex, funcStackInfo.funcStackTable))));
+  }
+
+  componentDidMount() {
+    console.log(this.refs.treeView);
+    this.refs.treeView.focus();
+    this.refs.treeView.procureInterestingInitialSelection();
+  }
+
   render() {
     const { profile, viewOptions, className } = this.props;
     const timeRange = getTimeRangeIncludingAllThreads(profile);
@@ -107,7 +133,10 @@ class ProfileViewer extends Component {
                            interval={profile.meta.interval}
                            funcStackInfo={funcStackInfos[selectedThread]}
                            selectedFuncStack={selectedFuncStacks[selectedThread]}
-                           expandedFuncStacks={expandedFuncStacks}/>
+                           expandedFuncStacks={expandedFuncStacks}
+                           onSelectedFuncStackChange={this._onSelectedFuncStackChange}
+                           onExpandedFuncStacksChange={this._onExpandedFuncStacksChange}
+                           ref='treeView'/>
          </div>
       </div>
     );

diff --git a/src/components/TreeView.js b/src/components/TreeView.js
@@ -258,6 +258,10 @@ class TreeView extends Component {
     }
   }
 
+  focus() {
+    this.refs.list.focus();
+  }
+
   render() {
     const { fixedColumns, mainColumn } = this.props;
     this._visibleRows = this._getAllVisibleRows(this.props);

diff --git a/src/components/VirtualList.js b/src/components/VirtualList.js
@@ -75,6 +75,10 @@ class VirtualList extends Component {
     }
   }
 
+  focus() {
+    this.refs.container.focus();
+  }
+
   render() {
     const { itemHeight, className, renderItem, items, focusable, onKeyDown } = this.props;