diff --git a/src/components/ProfileThreadHeaderBar.js b/src/components/ProfileThreadHeaderBar.js index 830283d8c0..435a22add5 100644 --- 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 index 908b680575..901b418ae5 100644 --- 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 ( + 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 index c9b891ecd8..91fd8bf512 100644 --- 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'/> ); diff --git a/src/components/TreeView.js b/src/components/TreeView.js index 9dd8223ab3..d42b214b6b 100644 --- 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 index c0c3b3c3fd..c5901da8c9 100644 --- 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;